Question

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

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

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>

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

Answer 1

您可以使用.sync修饰符。当您想将道具与父组件同步时，可以使用此特殊功能：这是documentation。您将不再使用数据。

所以它是如何工作的，您需要在子组件中发出带有更新值的事件更新问题：

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"
/>

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

1 个答案: