Vue.js Update value of nested props sync object in component

Question

Hi i have following problem for Vue.js v1.0.28 - I have component

Vue.component('question-editor', {
    template: require('./question-editor.html'),

    props: ['question'],

    methods: {

        addChoice() {
            this.question.choicesArr.push({
                id: null,
                body:'zzz',
                icon:'',
                next:null,
            });

            console.log(this.question.choicesArr);

        },
    }
});

Where ./question-editor.html :

...
    <div class="box-body">
        <div class="form-group" v-for="choice of question.choicesArr">
            <input v-model="choice.body" type="text" class="form-control">
        </div>

    </div>

    <div class="box-footer">
        <button @pointerdown="addChoice" type="submit" class="btn btn-primary">
            Add choice
        </button>
    </div>

I use this component in parent component in this way:

<question-editor :question.sync="currentQuestion"></question-editor>

The problem is that when I push button "Add choice" and method addChoice() is run, i see in console that property question.choicesArr have new element - but view doesnt change (I don't see this new element on screen - so the v-for not "see" this new element and not refresh itself). What to do inside addChoice() to refresh view to see new element in question.choicesArr on screen ?

Answer 1

I guess vue 1.x, does not detect changes in array as it does in 2.x , you can do following to let vue know that array has been changed with the help of spread operator .

addChoice() {
    this.question.choicesArr= [...this.question.choicesArr, {
        id: null,
        body:'zzz',
        icon:'',
        next:null,
    }];
}

Answer 2

I found the solution:

addChoice() {
    this.question.choicesArr.push({
        id: null,
        body:'zzz',
        icon:'',
        next:null,
    });

    this.question = Object.assign({}, this.question, this.question);
    console.log(this.question.choicesArr);

},

The statement this.question = Object.assign({}, this.question, this.question); will set __ob__:Observer and __v-for__1:Fragment to the new objects pushed to array.

I also try this.$set(this.question, 'question.choicesArr', this.question.choicesArr); but this one set only __ob__:Observer (not __v-for__1 ) so v-for will not updated.

I read about it here: https://v2.vuejs.org/v2/guide/reactivity.html