[Vuejs]-Vue: Passing a link to components prob

by

1👍

In your code, this line @click="router.push('{{link}}')" don’t work like that. You can write like this

@click="$router.push(`${link}`)"

Vue Mustache syntex i.e {{}} only work inside HTML tag like

<div>{{val}}</div>

to call an event you can simply run like below

<div @click="any valid js syntex">Hello</div>
👤nur_riyad

0👍

You’ve already defined link as a static prop in your Child Component so you don’t have to add single quotes around /mainview:

<Button text="To MainView" link="/mainview"></Button>

It would only be necessary if the prop is a dynamic prop (ex. :link="'/mainview'") but in this case, since you’re defining /mainview directly into the prop then you can omit the single quotes (Static Props vs Dynamic props). Additionally, you can pass link directly to the @click event like so:

<button class="btn" @click="router.push(link)">{{ text }}</button>

or just use router-link instead:

<router-link :to="link">
    <button class="btn">{{ text }}</button>
</router-link>
👤Christopher Tabula

Leave a comment