VueJS+Vuetify v-select绑定嵌套数组更新后组件未刷新问题

安全阿岳

2026-10-8

问题根因

你遇到的是Vue2的数组响应式限制：Vue2无法检测直接通过数组索引赋值的操作（如this.liste[iC] = 新值），因此修改后视图不会触发更新，v-select无法拿到最新的下拉选项数据。

解决方案

方案1：使用`$set`方法修改数组项（推荐，改动最小）

将你数组填充逻辑里的赋值语句替换为Vue提供的响应式赋值方法即可：

// 把原来的 this.liste[iC]  = [ ...res.data ]; 改成下面的写法
this.$set(this.liste, iC, [...res.data])

$set会主动通知Vue监听该数组下标的变化，触发对应视图更新。

方案2：全量替换整个数组

你可以先把所有接口返回的结果按顺序存入临时数组，所有请求完成后一次性替换整个liste数组，整数组替换是Vue2可以正常检测到的变动：

// 先声明临时数组
const tempList = new Array(anotherTable.length).fill([])
for(let iC = 0; iC < anotherTable.length; iC++) {
  await ApiService.getProducts(anotherTable.component[iC].code)
  .then((res) => {
    tempList[iC]  = [ ...res.data ];
  })
  .catch((err) => {
    this.$store.dispatch("updateSrvMsg", {type: 'error', content: err.message})
  });
}
// 一次性替换整数组，触发响应式更新
this.liste = tempList

该方案可以减少多次修改数组带来的频繁视图刷新，性能更优。