Vue技术问题：获取数据后场地列表需刷新页面才更新

嘿，我帮你分析下这个问题哈！你现在遇到的情况是接口已经返回了venues数据，但页面里的下拉选择框就是不更新，只有刷新页面才显示，对吧？这其实是Vue响应式系统的一个小限制导致的。

问题根源 #

你在created钩子里面用this.venues[i] = Object.assign(...)这种通过数组索引直接赋值的方式更新数组，Vue的响应式系统是检测不到这种操作的，所以数据虽然已经更新了，但视图不会自动重新渲染。

几种可行的解决方案 #

1. 直接替换整个数组（最简单高效）

不需要循环逐个赋值，直接把接口返回的数据处理成你需要的格式后，整个替换掉this.venues，Vue能检测到数组的替换操作，立刻触发视图更新：

created: async function() {
  try {
    let response = await CommonRequest.getVenues();
    // 用map方法把接口返回的数组转换成需要的结构，直接赋值
    this.venues = response.data.venues.map(ven => ({
      name: ven.name,
      _id: ven._id
    }));
  } catch (error) {
    if (error) console.log(error);
  }
}

2. 使用Vue能检测的数组变异方法

如果你需要保留原数组的部分内容，或者必须逐个添加元素，可以用Vue支持的数组变异方法（比如push()），这类方法会自动触发响应式更新：

created: async function() {
  try {
    let response = await CommonRequest.getVenues();
    let array = response.data.venues;
    // 先清空原数组（如果有需要的话）
    this.venues = [];
    for (let ven of array) {
      this.venues.push({
        name: ven.name,
        _id: ven._id
      });
    }
  } catch (error) {
    if (error) console.log(error);
  }
}

3. 用Vue.set手动触发响应式更新

如果一定要通过索引赋值，可以用Vue.set（或者组件内的this.$set）来手动告诉Vue这个位置的数据更新了：

// 如果在组件内，也可以直接用this.$set
import Vue from 'vue';

created: async function() {
  try {
    let response = await CommonRequest.getVenues();
    let array = response.data.venues;
    let i = 0;
    for (let ven of array) {
      // 用Vue.set更新指定索引的元素
      Vue.set(this.venues, i, {
        name: ven.name,
        _id: ven._id
      });
      i++;
    }
  } catch (error) {
    if (error) console.log(error);
  }
}

额外提醒 #

记得在组件的data里把venues初始化为空数组哦，这样能避免一些潜在的问题：

data() {
  return {
    venues: [],
    venue: '',
    venueErrors: []
    // 其他你的数据项
  }
}

简单来说，Vue对数组的响应式监听只覆盖特定的操作，避开直接索引赋值的坑，用上面的方法就能让页面自动更新啦！

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