Vue.js 2 - 陣列變化檢測

Question

這裏是我的代碼的簡化版本：

<template> 

     /* ---------------------------------------------------------- 
     * Displays a list of templates, @click, select the template 
     /* ---------------------------------------------------------- 
     <ul> 
      <li 
       v-for="form in forms.forms" 
       @click="selectTemplate(form)" 
       :key="form.id" 
       :class="{selected: templateSelected == form}"> 
       <h4>{{ form.name }}</h4> 
       <p>{{ form.description }}</p> 
      </li> 
     </ul> 

     /* -------------------------------------------------------- 
     * Displays the "Editable fields" of the selected template 
     /* -------------------------------------------------------- 

     <div class="form-group" v-for="(editableField, index) in editableFields" :key="editableField.id">          
      <input 
        type="text" 
        class="appfield appfield-block data-to-document" 
        :id="'item_'+index" 
        :name="editableField.tag" 
        v-model="editableField.value"> 
     </div>      
    </template> 

    <script> 
     export default {       
      data: function() { 
       return { 
        editableFields: [], 
       } 
      }, 
      methods: { 
       selectTemplate: function (form) { 

        /* ------------------ 
        * My problem is here 
        */ ------------------ 

        for (let i = 0; i < form.editable_fields.length; i++) {           
         this.editableFields.push(form.editable_fields[i]);    
        } 
       } 
      } 
     } 
    </script> 

基本上我想每一次的模板用戶點擊更新陣列EditableFields。我的問題是Vuejs沒有更新顯示，因爲檢測沒有被觸發。我已閱讀文檔here，建議$設置數組或僅使用Array實例方法，如拼接和推送。

上面的代碼（帶推）工程，但數組永遠不會被清空，因此，「可編輯字段」繼續堆積起來，這不是我想要的行爲。

爲了與新的數據再次填充它之前清空陣列，我試過幾件事情，沒有運氣：

this.editableFields.splice(0, this.editableFields.length); 

for (let i = 0; i < form.editable_fields.length; i++) { 
    this.editableFields.push(form.editable_fields[i]);     
} 

==>不更新顯示

for (let i = 0; i < form.editable_fields.length; i++) {     
    this.$set(this.editableFields, i, form.editable_fields[i]); 
} 

== >不更新顯示器

this.editableFields = form.editable_fields; 

==>不更新顯示器

我還沒有嘗試過的一件事是設置一個全新的數組，但我不明白我該如何放置，因爲我希望用戶能夠點擊（並更改模板選擇） 不止一次。

我在這個問題上ban了幾個鐘頭，我很感激任何幫助。 提前謝謝:)！

Answer 1

我沒有問題，使用拼接+推。反應性應按照您提供的鏈接中的說明正常觸發。

看我的代碼示例：

new Vue({ 
 
    el: '#app', 
 
    data: function() { 
 
    return { 
 
     forms: { 
 
     forms: [{ 
 
      id: 'form1', 
 
      editable_fields: [{ 
 
       id: 'form1_field1', 
 
       value: 'form1_field1_value' 
 
       }, 
 
       { 
 
       id: 'form1_field2', 
 
       value: 'form1_field2_value' 
 
       } 
 
      ] 
 
      }, 
 
      { 
 
      id: 'form2', 
 
      editable_fields: [{ 
 
       id: 'form2_field1', 
 
       value: 'form2_field1_value' 
 
       }, 
 
       { 
 
       id: 'form2_field2', 
 
       value: 'form2_field2_value' 
 
       } 
 
      ] 
 
      } 
 
     ] 
 
     }, 
 
     editableFields: [] 
 
    } 
 
    }, 
 
    methods: { 
 
    selectTemplate(form) { 
 
     this.editableFields.splice(0, this.editableFields.length); 
 
     for (let i = 0; i < form.editable_fields.length; i++) { 
 
     this.editableFields.push(form.editable_fields[i]); 
 
     } 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> 
 
<div id="app"> 
 
    <ul> 
 
     <li v-for="form in forms.forms" 
 
      @click="selectTemplate(form)" 
 
      :key="form.id"> 
 
      <h4>{{ form.id }}</h4> 
 
     </li> 
 
    </ul> 
 

 
    <div class="form-group" 
 
     v-for="(editableField, index) in editableFields" 
 
     :key="editableField.id"> 
 
      {{ editableField.id }}: 
 
     <input type="text" v-model="editableField.value"> 
 
    </div> 
 
</div>

Answer 2

問題解決了......代碼的另一個偏遠實際上，造成問題的原因。

以供將來參考，該解決方案是正確的：

this.editableFields.splice(0, this.editableFields.length); 

for (let i = 0; i < form.editable_fields.length; i++) { 
    this.editableFields.push(form.editable_fields[i]);     
} 

只使用Array實例的方法是去與Vuejs的方式。