1
人。私はVue.jsの陛下の本を読んでいます2.私は本の一例と混同しています。なぜv-bindは一方向データバインディングであるのに対し、v-forはvue.jsの子コンポーネントからデータを更新できるのですか？
私の質問は - お気に入りのボタンができない間、preタグに表示されているVueインスタンスのデータをupvoteボタンで変更できるのはなぜですか？
お気に入りはv-bindディレクティブによってバインドされていると言われています。これは、片方向のデータバインディングで、子が親とデータを同期できないことを意味します。しかし、どのように話が更新されましたか？ v-modelのような双方向データバインディング？ここで
はコードの例です：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
</head>
<body>
<div v-cloak id="app">
<div class="container">
<h1>Let's hear some stories!</h1>
<ul class="list-group">
<story v-for="story in stories" :story="story" :favorite="favorite"></story>
</ul>
<pre>{{ $data }}</pre>
</div>
</div>
</body>
<template id="story-template">
<li class="list-group-item">
{{ story.writer }} said "{{ story.plot }}"
Story upvotes {{ story.upvotes }}.
<button v-show="!story.voted" @click="upvote" class="btn btn-default">Upvote</button>
<button v-show="!isFavorite" @click="setFavorite" class="btn btn-primary">Favorite</button>
</li>
</template>
<script src="../../vue.js"></script>
<script type="text/javascript">
Vue.component('story', {
template: "#story-template",
props: ['story', 'favorite'],
methods: {
upvote: function() {
this.story.upvotes += 1;
this.story.voted = true;
},
setFavorite: function() {
this.favorite = this.story;
}
},
computed: {
isFavorite: function() {
return this.story === this.favorite
}
}
});
window.app = new Vue({
el: '#app',
data: {
stories: [
{
plot: 'My horse is amazing.',
writer: 'Mr. Weebl',
upvotes: 28,
voted: false
},
{
plot: 'Narwhals invented Shish Kebab.',
writer: 'Mr. Weebl',
upvotes: 8,
voted: false
},
{
plot: 'The dark side of the Force is stronger.',
writer: 'Darth Vader',
upvotes: 49,
voted: false
},
{
plot: 'One does not simply walk into Mordor',
writer: 'Boromir',
upvotes: 74,
voted: false
}
],
favorite: {}
}
})
</script>
</html>
ありがとうございます！ – krave