Я пытаюсь понять, как передавать данные между компонентами в vue.js. Я несколько раз читал документы и смотрел на многие вопросы и руководства по vue, но я до сих пор не понимаю.
Чтобы обернуть голову вокруг этого, я надеюсь на помощь в завершении довольно простого примера
- отобразить список пользователей в одном компоненте (сделано)
- отправьте данные пользователя новому компоненту при щелчке ссылки (сделано) - см. обновление внизу.
- отредактируйте пользовательские данные и отправьте их обратно в исходный компонент (не получили этого).
Вот скрипка, которая не работает на втором шаге: https://jsfiddle.net/retrogradeMT/d1a8hps0/
Я понимаю, что мне нужно использовать реквизиты для передачи данных новому компоненту, но я не уверен, как это сделать. Как связать данные с новым компонентом?
HTML:
<div id="page-content">
<router-view></router-view>
</div>
<template id="userBlock" >
<ul>
<li v-for="user in users">{{user.name}} - <a v-link="{ path: '/new' }"> Show new component</a>
</li>
</ul>
</template>
<template id="newtemp" :name ="{{user.name}}">
<form>
<label>Name: </label><input v-model="name">
<input type="submit" value="Submit">
</form>
</template>
js для основного компонента:
Vue.component('app-page', {
template: '#userBlock',
data: function() {
return{
users: []
}
},
ready: function () {
this.fetchUsers();
},
methods: {
fetchUsers: function(){
var users = [
{
id: 1,
name: 'tom'
},
{
id: 2,
name: 'brian'
},
{
id: 3,
name: 'sam'
},
];
this.$set('users', users);
}
}
})
JS для второго компонента:
Vue.component('newtemp', {
template: '#newtemp',
props: 'name',
data: function() {
return {
name: name,
}
},
})
UPDATE
Хорошо, у меня есть второй шаг. Вот новая скрипка, показывающая прогресс: https://jsfiddle.net/retrogradeMT/9pffnmjp/
Поскольку я использую Vue-router, я не использую реквизиты для отправки данных новому компоненту. Вместо этого мне нужно установить параметры на v-link, а затем использовать переходный крюк, чтобы принять его.
Изменения V-link видят именованные маршруты в документах vue-router:
<a v-link="{ name: 'new', params: { name: user.name }}"> Show new component</a>
Затем на компоненте добавьте данные в параметры маршрута см. переходы перехода:
Vue.component('newtemp', {
template: '#newtemp',
route: {
data: function(transition) {
transition.next({
// saving the id which is passed in url
name: transition.to.params.name
});
}
},
data: function() {
return {
name:name,
}
},
})
