VueJS中v-card动态loading属性设置失效问题求助

问题根源 #

Vue 2的响应式系统无法检测到对象新增属性或通过直接索引修改的属性变化。如果你的loadingTemplates初始是一个空对象，后续直接用this.loadingTemplates[element._id] = false修改属性，虽然控制台能看到值变了，但Vue没感知到这个操作，所以视图里的loading状态不会更新。

可行的解决方法 #

方法一：用this.$set触发响应式更新 #

把赋值代码改成：

this.$set(this.loadingTemplates, element._id, false)

$set是Vue提供的API，专门用来给响应式对象添加/修改属性并触发视图更新。

方法二：提前初始化所有loading状态 #

在GET请求拿到templates数组后，先把loadingTemplates初始化为包含所有任务ID的对象：

// 假设接口返回的数据存在res.data里
this.templates = res.data
this.loadingTemplates = res.data.reduce((acc, item) => {
  acc[item._id] = true
  return acc
}, {})

之后再直接修改this.loadingTemplates[element._id] = false时，因为属性本来就在响应式对象里，Vue能自动检测到变化。

方法三：通过替换对象触发更新 #

用Object.assign创建新对象替换原有的loadingTemplates：

this.loadingTemplates = Object.assign({}, this.loadingTemplates, {
  [element._id]: false
})

Vue会检测到loadingTemplates的引用变化，从而更新视图。

关于是否需要将templates改为JSON对象 #

不需要。templates用数组存储完全符合v-for循环的需求，问题和templates的类型无关，只需要解决loadingTemplates的响应式更新问题即可。

内容的提问来源于stack exchange，提问作者user3216533