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的方式。