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实例方法，例如splice和push。

上面的代码（使用推送）有效，但数组永远不会被清空，因此，＆＃34;可编辑的字段＆＃34;继续起来，这不是我想要的行为。

为了在用新数据再次填充数组之前清空数组，我尝试了几件没有运气的事情：

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

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

==＆GT;不更新显示

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

==＆GT;不更新显示

this.editableFields = form.editable_fields;

==＆GT;不更新显示

我尚未尝试的东西是使用新数据设置一个全新的阵列，但我无法理解如何将其设置到位，因为我希望用户能够点击（并更改）模板选择）不止一次。

我现在几个小时就把这个问题弄得头疼，我很感激任何帮助。提前谢谢:)！

Answer 1

我使用splice + push没有问题。应按照您提供的链接正常触发反应性。

请参阅我的代码示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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的用法。

Vue.js 2 - 阵列变化检测

2 个答案: