Как правильно написать переменные в атрибут элемента Vuejs?

Question

[Дилик Пулатов]

Здравствуйте!
Я в вю ещё новичок
итак у меня такая проблема

<div class="list-group">
	<template v-for="(user, i) in users">
		<router-link class="list-group-item" to="/user/{{user.id}}">{{ i }}: {{ user.name }}</router-link>
	</template>
</div>

<script>
	export default{
		data(){
			return{
				users:[
					{name:'User 1', id: 45},
					{name:'User 2', id: 55},
					{name:'User 3', id: 63},
					{name:'User 4', id: 82},
					{name:'User 5', id: 16}
				],
			}
		},
	}
</script>

там в тег router-link атрибут to как правильно написать переменные?

Answer 1

[Evgeny Kulakov]

Вот так попробуйте: :to="`/user/${user.id}`"

Comments

[Дилик Пулатов]

спасибо...я только начал научить Вю...и часто бывает такие вопросы...вижу вы вю разработчик...а можно к вам обращаться когда будет вопросы?

[Evgeny Kulakov]

Обращайтесь, постараюсь помочь.

[Дилик Пулатов]

Evgeny Kulakov: ок спасибо

Answer 2

[RaulDuke]

Добрый день, я делаю так:

<router-link tag="li" :to="{ name: 'user', params: { id: user.id } }" :class="$style.dropdown__item">

const router = new VueRouter({
  mode: 'history',
  linkActiveClass: '_active',
  routes: [
    { path: '/users/:id', component: require('./components/Profile.vue'), name: 'user' }
  ]
});

Answer 3

[tursumbekov]

Перед to забыл поставить двоеточие :to, поэтому не видит переменной, не надо делать как предложил Evgeny Kulakov , это излишне.

Comments

[Evgeny Kulakov]

Что излишне? Я собственно двоеточие и имел ввиду)