Question

人。我正在阅读Vue.js陛下的书2.我对书中的一个例子感到困惑。

我的问题是 - 为什么upvote按钮可以修改pre标签中显示的Vue实例的数据，而喜欢的按钮却不能？

据说，收藏夹是通过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>

Answer 1

这与对象在Javascript中的工作方式有关。存储在变量中时，您需要对该对象的引用。所以当你传递它时，你实际上只是传递了引用。意思是改变一个对象（不是覆盖！），改变是在所有地方。

您的示例中发生的是修改故事对象。您可以更改其键，但不会覆盖对象本身。看到该应用程序与故事对象具有相同的引用。显示了更改。

然而，在喜欢的情况下。您将获得最喜欢对象的引用。但是一旦你点击收藏夹按钮。它交换变量以引用故事，但仅限于本地。该应用仍然保留旧的参考。这是因为您只传递引用本身而不是父对象。

这就是像Vuex这样的州经理来到这里的地方。

为什么v-bind是单向数据绑定，而v-for可以更新来自vue.js中的子组件的数据？

1 个答案: