Question

您好我对Vue.js v1.0.28有以下问题 - 我有组件

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);

        },
    }
});

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

我以这种方式在父组件中使用此组件：

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

问题是，当我按下“添加选项”按钮并运行方法addChoice()时，我在控制台中看到属性question.choicesArr有新元素 - 但视图没有改变（我看不到这个新元素在屏幕上 - 所以v-for不“看到”这个新元素而不是刷新自己）。在addChoice()内要做什么来刷新视图以在屏幕上查看question.choicesArr中的新元素？

Answer 1

我猜vue 1.x，没有像2.x中那样检测到数组中的更改，您可以执行以下操作，让vue知道数组已在spread operator的帮助下更改。< / p>

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

Answer 2

我找到了解决方案：

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);

},

语句this.question = Object.assign({}, this.question, this.question);会将__ob__:Observer和__v-for__1:Fragment设置为推送到数组的新对象。

我也尝试this.$set(this.question, 'question.choicesArr', this.question.choicesArr);，但这只设置__ob__:Observer（不是__v-for__1），因此v-for不会更新。

我在这里阅读：https://vuejs.org/v2/guide/reactivity.html

Vue.js更新组件中嵌套的props同步对象的值

2 个答案: