Vue2: Avoid mutating a prop directly since the value will be overwritten whenever

Question

I'm new to Vue. I'm trying to improve myself.

I get an error when I use props in a v-for. For example:

Template:

<template>
    <div class="row">
      <div v-for="question in questions" class="col-md-12"><br />
        <router-link :to="'/question/' + question.question_id">
                <a :href="'/question/' + question.question_id" class="btn btn-primary btn-md pull-left">{{question.title}}</a>
        </router-link>
      </div>
    </div>
</template>

Script: (Page component is the same)

props: [
        'questions',
    ],
    data () {
        return {
            questionList: {}
        }
    },
    created() {
        this.fetchQuestions();
    },
    computed: {
        pageNumber () {
            return (!isNaN(this.$route.params.id)) ? this.$route.params.id : 1;
        },
        hasPrevious () {
            return (this.$route.params.id > 0) ? true : false;
        },
    },
    methods: {
        fetchQuestions() {
            fetch(`http://api.stackexchange.com/2.2/questions?key=MY_KEY&page=
${parseInt(this.pageNumber)}
&pagesize=10&order=desc&sort=activity&tagged=vue.js&site=stackoverflow`, {
                method: 'GET',
              }).then((resp) => {
                return resp.json();
              }).then((obj) => {
                this.questions = obj.items;
              });
        },
    }

If I use data for iterations, iteration doesn't work. I use props for the iteration because the property is getting it's value from the page component.

If I use it like this it works without error first time:

data () {
    return {
        questionList: this.questions,
    }
},
 //... blah blah
methods: {
    fetchQuestions() {
        // blahblah
        .then((obj) => {
            this.questionList = obj.items;
          });
    },
}

But when I changed the page (yes my project has pagination), questionList didn't update.

If I use it like this:

data () {
    return {
        questionList: {},
    }
},
 //... blah blah
methods: {
    fetchQuestions() {
        // blahblah
        .then((obj) => {
            this.questions = obj.items;
          });
    },
}

It threw an error even if the page changes.

As I said I'm new in Vue. What can I do to solve this issue?

If you want the new questions to exist in the parent, you should emit an event and have the parent respond by loading a new question list. If you only want the child to see the newly loaded questions, follow Bert's solution. — Roy J

Bert Bert · Accepted Answer · 2017-06-25T16:45:03

First, change your template to iterate over questionList.

<div v-for="question in questionList" class="col-md-12">

Then, change your script to your second option.

data () {
    return {
        questionList: this.questions,
    }
},
 //... blah blah
methods: {
    fetchQuestions() {
        // blahblah
        .then((obj) => {
            this.questionList = obj.items;
          });
    },
}

You want your component to iterate over questionList, the local copy. You initialize questionList with the property questions. After that, you want the fetchQuestions method to update questionList.

Vue2: Avoid mutating a prop directly since the value will be overwritten whenever

2 Answers