Tôi đang đấu tranh để hiểu cách truyền dữ liệu giữa các thành phần trong vue.js. Tôi đã đọc qua tài liệu nhiều lần và xem nhiều câu hỏi và hướng dẫn liên quan đến vue, nhưng tôi vẫn không hiểu.
Để giải quyết vấn đề này, tôi hy vọng được giúp đỡ để hoàn thành một ví dụ khá đơn giản
- hiển thị danh sách người dùng trong một thành phần (đã xong)
- gửi dữ liệu người dùng đến một thành phần mới khi một liên kết được nhấp vào (xong) - xem bản cập nhật ở dưới cùng.
- chỉnh sửa dữ liệu người dùng và gửi nó trở lại thành phần ban đầu (chưa đi được xa)
Đây là một fiddle, không thành công ở bước hai: https://jsfiddle.net/retrogradeMT/d1a8hps0/
Tôi hiểu rằng tôi cần sử dụng đạo cụ để chuyển dữ liệu sang thành phần mới, nhưng tôi không chắc về cách thực hiện chức năng. Làm cách nào để liên kết dữ liệu với thành phần mới?
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 cho thành phần chính:
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 cho thành phần thứ hai:
Vue.component('newtemp', {
template: '#newtemp',
props: 'name',
data: function() {
return {
name: name,
}
},
})
CẬP NHẬT
Được rồi, tôi đã tìm ra bước thứ hai. Đây là một trò chơi mới cho thấy tiến trình: https://jsfiddle.net/retrogradeMT/9pffnmjp/
Bởi vì tôi đang sử dụng Vue-router, tôi không sử dụng đạo cụ để gửi dữ liệu đến một thành phần mới. Thay vào đó, tôi cần thiết lập các tham số trên v-link và sau đó sử dụng móc chuyển tiếp để chấp nhận nó.
Thay đổi V-link xem các tuyến đường được đặt tên trong tài liệu vue-router :
<a v-link="{ name: 'new', params: { name: user.name }}"> Show new component</a>
Sau đó, trên thành phần, thêm dữ liệu vào các tùy chọn tuyến đường xem các móc chuyển tiếp :
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,
}
},
})