vue.jsのコンポーネント間でデータを渡す方法を理解するのに苦労しています。ドキュメントを数回読み、vueに関連する多くの質問やチュートリアルを確認しましたが、まだ理解できていません。
これに頭を悩ませるために、私は非常に単純な例を完成させる助けを望んでいます
- 1つのコンポーネントにユーザーのリストを表示する（完了）
- リンクがクリックされた（完了した）ときに、ユーザーデータを新しいコンポーネントに送信します-下部の更新を参照してください。
- ユーザーデータを編集して、元のコンポーネントに送り返します（ここまで取得していません）
これがステップ2で失敗するフィドルです：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);
}
}
})
2番目のコンポーネントのJS：
Vue.component('newtemp', {
template: '#newtemp',
props: 'name',
data: function() {
return {
name: name,
}
},
})
更新
わかりました、私は2番目のステップを理解しました。これが進捗状況を示す新しいフィドルです：https：//jsfiddle.net/retrogradeMT/9pffnmjp/
私はVue-routerを使用しているので、データを新しいコンポーネントに送信するために小道具を使用しません。代わりに、v-linkにパラメータを設定し、遷移フックを使用してそれを受け入れる必要があります。
Vリンクの変更は、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,
}
},
})