Vue.js更新值組件同步對象

Question

您好我有以下的Vue.js v1.0.28的問題 - 我有分量

​​3210

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

的問題是，當我按下按鈕「將C hoice「和方法addChoice()運行，我看到在控制檯屬性question.choicesArr有新的元素 - 但視圖不會改變（我沒有看到這個新的元素在屏幕上 - 所以v-不是」看到「這個新的元素，而不是刷新本身）。 addChoice()內部要做什麼刷新視圖以在屏幕上查看question.choicesArr中的新元素？

Answer 1

我找到了解決辦法：

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

Answer 2

我猜VUE 1.x中，不數組作爲它2.x確實發現變化，你可以做以下讓VUE知道陣列已經改變與spread operator幫助。

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