时间戳

首页 > 解决方案 > 为什么我不能将属性直接分配到我的数据中？

javascript - 为什么我不能将属性直接分配到我的数据中？

问题描述

我无法访问我的问题道具以将其属性直接分配到我的数据属性中。直接从我的模板中使用该属性可以工作，但无法将该属性分配给数据。

我只能从我的模板中访问 props 的值：

props: ['question'],
data () {
    return {

    }
};

computed: {
    upVote () {
        return this.question.upvoted
    },

    count () {
        return this.question.vote_count
    }
}

methods: {
    upVoteIt () {
        if(User.loggedIn()) {
            this.upVote = !this.upVote
            this.upVote ? this.incr() : this.decr()
        }
    },

    incr () {
        this.count ++
    },

    decr () {
        this.count --
    }
}

<v-icon size="50" :color="upcolor" @click="upVoteIt">fas fa-sort-up</v-icon>
<span> {{ count }} </span>

如果我直接在模板中使用道具而不是重新分配到数据属性中，我会得到值。

标签： javascriptvue.js

解决方案

您可以使用 .sync 修饰符。当您想将 props 与您的父组件同步时，您可以使用它的一项特殊功能：这里是文档。您将不再使用这些数据。

那么它是如何工作的，你需要在你的子组件中发出一个带有更新值的事件更新问题：

props: ['question'],
methods: {
    upVoteIt () {
        if(User.loggedIn()) {
            this.$emit('update:question', {
               ...this.question,
               upvoted: !this.question.upvoted,
               count: this.question.upvoted ? this.question.count - 1 : this.question.count + 1 
            }
        }
    }
}

<v-icon size="50" :color="upcolor" 
    @click="upVoteIt">fas fa-sort-up</v-icon>
    <span> {{ question.vote_count }} </span>

现在在您的父母中，您需要执行以下操作：

<YourQuestionComponent 
   :question.sync="myQuestionVariable"
/>

推荐阅读