更新数组中对象的属性时重新渲染答案

【问题标题】：Re-rending when update property of object in an array更新数组中对象的属性时重新渲染
【发布时间】：2022-01-12 05:38:50
【问题描述】：

我有一个 fileArray 数组来保存 Vue 2 应用程序中的所有 文件对象。当我按照建议使用this.set 更新文件对象 的属性时，它不会重新渲染（切换“活动”类）。但是，如果数组包含正常的 Object，例如 fileArray = [{name: "John"}, {name: "Jacob"}]，但不包含 File Object

，它会起作用

代码

<template>
  <div v-for="(item, index) in fileArray">
    <a-card :class="item.active ? 'active' : ''">
    <img :src="item.imageUrl" @click="handleSelect(index)" />
  </div>
</template>

export default {
  data() {
    return {
      fileArray: []
    }
  },
  methods: {
   beforeUpload(file) {
     // Add file object into array
     this.fileArray.push(file)
     return false
    }
  },
  handleSelect(index) {
   if (this.fileArray[index]) {
     // Update object property inside an array with this.$set but it won't re-render
     this.$set(this.fileArray[index], 'active', !this.fileArray[index].active)
   }
  }
}

下面的代码将如何帮助重新渲染，但扩展运算符不适用于文件

beforeUpload(file) {
     // Add file object into array
     this.fileArray = [...this.fileArray, {...file}]
     return false
    }
},

重新分配数组以便重新渲染的临时解决方案

handleSelect(index) {
   if (this.fileArray[index]) {
     this.$set(this.fileArray[index], 'active', !this.fileArray[index].active)
     this.fileArray = [...this.fileArray]
   }
}

如果您遇到这种情况，请提供帮助。

【问题讨论】：

标签： javascript arrays vue.js object reactive

【解决方案1】：

这段代码不起作用？：

<template>
  <div v-for="item in fileArray">
    <a-card :class="{ active : item.active }">
    <img :src="item.imageUrl" @click="item.active = !item.active" />
  </div>
</template>

【讨论】：

【解决方案2】：

您的 v-for 元素缺少 :key 属性，因此 vue 不知道应该更新哪些节点。尝试添加哈希/唯一 id 以传递给键属性，或使用索引作为解决方法。

<div v-for="(item, index) in fileArray" :key="item.imageUrl">
  <a-card :class="item.active ? 'active' : ''">
  <img :src="item.imageUrl" @click="handleSelect(index)" />
</div>

我选择了上面的 imageUrl，因为我认为它可能对每张图片都是独一无二的。如果它们没有唯一标识符，也可以使用“索引”。

如果这不起作用，您可以通过将密钥绑定到每次更新时替换的内容来手动强制更新，或者在最后一道防线中使用以下链接中的方法：

https://vuejs.org/v2/guide/components-edge-cases.html#Controlling-Updates

【讨论】：