Vue中v-expansion-panel内修改数组数据不触发加载动画显示问题

该问题由Vue 2响应式系统的固有约束导致：Vue 2的响应式劫持逻辑无法监听到直接通过索引修改数组元素的操作，你在getAddress方法中执行loader[i] = true时，改动没有触发视图重新渲染。只有当其他交互（比如展开其他币种的面板）触发了组件整体重渲染时，之前对加载状态数组的修改才会被同步到视图上，就出现了你遇到的延迟显示加载动画的问题。

额外注意检查代码变量名一致性：你方法中操作的变量是loader，但模板绑定和data中定义的变量名是loading，如果不是书写笔误需要先修正变量名。

• 方案1：使用Vue 2内置的$set方法触发响应式更新，将赋值逻辑替换为：

getAddress(i){
  this.$set(this.loading, i, true);
  // 其他原有操作
}

• 方案2：使用数组原生的splice方法修改数组，Vue 2可以监听到splice触发的数组变更：

getAddress(i){
  this.loading.splice(i, 1, true);
  // 其他原有操作
}

• 方案3：如果你的项目已经升级到Vue 3，该问题会自动解决，Vue 3使用Proxy做响应式劫持，原生支持监听索引修改数组的操作。

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