Menu
I'm working on small project using nuxt.js and i would like to create a link to my products varints using <nuxt-link to=""> and i don't know how can i pass the id of the product that i get from the database i tried with but i get an error.
what should i do ? this is my code :
<tr v-for="product in variables.laravelData.data" :key="product.id">
<td>
<input type="checkbox" name="">
</td>
<td><img src="images/ui/thumb.jpg" width="38" height="38" alt=""></td>
<td>
<nuxt-link to="/products/variants/{{product.id}}">
{{ product.product_name }}
</nuxt-link>
</td>
</tr>
490
The only thing you have to do to is add the nuxt-link-exact-active class to your styles and then you can style it as you wish. You can add this css to your navigation component or to a specific page or layout or in your global css file. See the nuxt docs for more information on adding global css files.
Nuxt automatically includes smart prefetching. That means it detects when a link is visible, either in the viewport or when scrolling and prefetches the JavaScript for those pages so that they are ready when the user clicks the link.
To get the current route path in nuxt, we can use this. $route. path or $this.
To get the query params from an above URL, we can use this. $route. query object inside our vue component <script> tag. Inside the vue component template, you can access it like this.
You should to bind the to directive to write a dynamic id using template strings, as below:
<nuxt-link :to="`/products/variants/${product.id}`">
Does this work?
<nuxt-link :to="{name: 'name-of-your-router', params: { id: product.id } }">
According to this https://github.com/nuxt/nuxt.js/issues/1546#issuecomment-326267738 :
If you want to use params you need to use name and not path:
<nuxt-link :to="{name: 'post-detail-id', params: { id:idPost } }">{{title}}</nuxt-link>
You can see the name for each route into .nuxt/router.js
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
