Router-link with dynamic id in v-for loop

I am creating a SPA page with CRUD by using Vue-router.

I managed to develop the function with Create and Delete, however I am facing some difficulty to develop an update function because router-link does not allow me to use {{ category.id }} in the param

<div class="category-list" v-for="category in categories">
    <router-link to="{ name: 'category/edit', params: { categoryId: {{ category.id }} }" class="dropdown-item">Home</router-link>
</div>

When I compiled the scripts, webpack prompts me this error message.

 error  in ./resources/assets/js/components/Category.vue

(Emitted value instead of an instance of Error)
  Vue template syntax error:

  to="{ name: 'category/edit', params: { categoryId: {{ category.id }} }": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.


 @ ./resources/assets/js/components/Category.vue 5:2-177
 @ ./resources/assets/js/admin/app.js
 @ multi ./resources/assets/js/admin/app.js ./resources/assets/sass/app.scss

May I know how to rectify this issue?

You don’t have to use interpolations inside tags, but use bind syntax, like v-bind:to or simply :to.
You can use variables into your attribute tag.

<div class="category-list" v-for="category in categories">
    <router-link :to="{ name: 'category/edit', params: { categoryId: category.id }" class="dropdown-item">Home</router-link>
</div>
2 Likes

Hello @loregirardi

I am using your method as I managed to find some solutions from Google.

If I want to use a method like yours, I need to defined my routes as below?

When I go into CategoryEdit.vue, I just need to use this.$route.params.categoryId to retrieve the category ID?

Yes, you have to define your routes, then in your CategoryEdit.vue you can use this.$route.params.categoryId to get your current id.

Please make shure you told vue use VueRouter like this:

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

in the same file you defined your routes.

Tell me if everything works :slight_smile:

Hi @loregirardi

If I use the routes with { path: '/category/edit/:id' ... }

It will show a blank page when I go into localhost/category/edit, I think it is because one more path is missing.

When I remove the :id in the routes path.
It show the CategoryEdit.vue when I go to localhost/category/edit

But the problem is, this.$route.params unable to display categoryId, from the screenshot below it more like a null / blank.

1 Like

You have to insert into your url wich id you are editing, something like this:

<div class="category-list" v-for="category in categories">
    <router-link :to="`/category/edit/${category.id}`" class="dropdown-item">Home</router-link>
</div>

and leave your routes as { path: '/category/edit/:id' ... }

Let me know :slight_smile:

7 Likes

OMG @loregirardi !
I cannot believe it is working!

Thanks!

May I know why the :to must use and${ … }`?
Does these two syntax represent anything?

Sorry I know this question sounds dumb but I really want to know more.

:to is a shorthand for v-bind:to, using this synthax you can use expressions that you usally write inside mustaches (i.e. {{ myVar }}) inside tag, so you have access to variables and to simple expression as string, conditions, objects. if you want to know full info please read this:

${} is an ES6 synthax called template literals, refers to this link to know more:

Temlate literals are strings, but instead use “’” character you use back-tick and you can wirte expression inside ${}.

So, writing the solution above is the same as <router-link :to="'/category/edit/' + category.id" class="dropdown-item">Home</router-link> and it’s working because Vue read this.$route.params from dynamic param you passed on route.

Basically your path path: '/category/edit/:id' have a dinamic id because you used : before id.
When you go to this example route /category/edit/1290 vue save 1290 into params, you can access directly on url or in a link, in the solution above we are composing with a string the complete path with id :slight_smile:

Glad it works,

Lorenzo :slight_smile:

3 Likes

Thanks! Your explanation really benefit me!

It helps me on my future development!
Much appreciated!

1 Like

Very kind from you,
good luck :slight_smile:

1 Like

Hey guys, I’ve got a trouble and I did not find any explanations in the doc. I answer there cause it seems talking approximatively about the same subject.

                <td><router-link :to="{name: 'EditItem', params: { id: item._id }}" class="btn btn-primary">Edit</router-link></td>
                <td><router-link :to="'/edit/item/' + item._id" class="btn btn-primary">Edit</router-link></td>

Into the first line, the _id I set into object to > params is always the same while I’m in a loop v-for=“item in items”. In the second line, I got the right _id into the link.

I dont wanna use the second solution cause I set name to the component. Is there any way to fix it ?

1 Like

I have encountered the same issue. Did you manage to solve this?

Best regards

Alexandre

I have seen in this discussion that many people have faced this same issue. I am not that educated to solve that issue but I can suggested you a name who can help you to solve that issue. hp customer service may solve your issue. So if anyone want then contact them.

##Thanks
I searched high and low to make this work and this solution worked first time. Fantastic.

https://router.vuejs.org/api/#router-link

<!-- with query, resulting in `/register?plan=private` -->
<router-link :to="{ path: 'register', query: { plan: 'private' }}">Register</router-link>

Thanks bro it’s working… ^