Question

仅在控制台中更新数组，而不在DOM中更新。我已经尝试过放置：key了。这是我的代码：

<div style="margin-top: 5px;" v-for="(file, index) in editedItem.file_name" 
                                         :key="editedItem.file_id[index]" >
    <a :href="`/biodidb/storage/${file}.${editedItem.file_type[index]}`" target="_blank">
        {{`${file}.${editedItem.file_type[index]}`}}
    </a>
    <span style="cursor: pointer;" @click="deleteData(editedItem.file_id[index], 'photos', index)">
        <v-icon
            small
            class="ml-3"
        >
           delete
        </v-icon>
        Delete 
    </span>
</div>

JS：

deleteData(id, type, index) {
    this.editedItem.file_name.splice(index,1);
    this.editedItem.file_type.splice(index,1);
    this.editedItem.file_id.splice(index,1);
}
enter code here

我还有一个名为update的方法，当单击该对象时，我会将一个对象分配给我数据中名为editedItem的对象。

data() {
    return {
        editedItem: {}
    }
},
methods: {
      update(id, item) {
             this.editedItem = Object.assign({}, item);
      }
}

Answer 1

您的editedItem结构如何？使用v-for的方式是用于

之类的数据

  data: {
    editedItem: {
      file_id: ['1'],
      file_type: ['type 1'],
      file_name: ['testing'],
    }

Answer 2

如果您的数据如下所示：

Select ?something? from dual;

然后再像这样向... data:function(){ return{ editedItem{} } } ...添加数组

editedItem

然后，您的新editedItem.file_name = ['myFileName'];属性将不会起作用，并且不会被Vue跟踪。

您需要在file_name函数中指定要使用的数组：

data

或通过... data:function(){ return{ editedItem:{ file_name:[] } } } ...

将新的新属性添加到editedItem

Vue.set()

拼接后VUEjs阵列将不会更新

2 个答案: