[Vuejs]-Why can't I assign properties directly into my data?

by

0👍

You can use .sync modifier. It is a special feature that you can use when you want synchronize props with your parent component : Here is the documentation . you will no longer use the data.

So how it works, you need in your child compoment emit an event update question with the updated value :

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>

Now in your parent you need to do something like this :

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

Leave a comment