Vuetify <v-data-table>数据不显示问题及正确用法咨询

核心原因：Vue响应式数组的更新规则 #

直接给this.users赋值能正常显示，是因为Vue会监听对象属性的赋值操作，触发响应式更新；而你用forEach循环时如果写法不对，Vue无法追踪到数组的变化，导致表格不渲染。

正确的forEach循环写法 #

如果要通过forEach处理数据后填充数组，必须用Vue能识别的数组变更方法（比如push），示例代码如下：

// 组件data中初始化响应式数组
data() {
  return {
    users: []
  }
},
methods: {
  async fetchUserData() {
    const response = await fetch('/你的接口地址');
    const rawData = await response.json();
    
    // 先清空数组避免重复数据
    this.users = [];
    // 用forEach+push处理并添加数据
    rawData.forEach(item => {
      // 按需求构造每行的对象
      const userItem = {
        id: item.id,
        name: item.name,
        phone: item.phone
        // 其他需要的字段
      };
      this.users.push(userItem);
    });
  }
}

常见错误写法（导致无内容的原因） #

如果你的代码是下面这种用索引直接赋值的方式，Vue无法检测到数组变化：

// 错误示例：索引直接赋值，Vue无感知
rawData.forEach((item, index) => {
  this.users[index] = { ...item };
});

这种写法确实修改了数组，但Vue的响应式系统追踪不到，所以表格不会更新。

更简洁的替代写法 #

除了forEach+push，也可以用map直接生成新数组后赋值，代码更简洁，效果和直接赋值一致：

this.users = rawData.map(item => {
  return {
    id: item.id,
    name: item.name,
    phone: item.phone
  };
});

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