秒杀！Vue 数据更新 Table 内容不更新的解决方案大全

前端

2023-01-02 21:08:45

数据变化了，表格却不更新？Vue 中 Table 组件数据更新终极指南

在 Vue.js 中，Table 组件是一款强有力的工具，可用于展示和编辑数据。然而，当你遇到数据变化但表格内容却保持不变的情况时，可能会令人沮丧。别担心！这篇指南将深入探究这个问题，并提供一个终极解决方案，让你轻松搞定表格数据更新。

理解响应式数据

Vue.js 的核心原则之一就是响应式数据。这意味着当数据发生变化时，所有依赖它的 UI 元素都会自动更新。但是，要让 Table 组件响应数据变化，表格中的数据本身也必须是响应式的。

响应式数据类型

Vue.js 中有两种类型的数据可以实现响应式：

Vue 实例： 包含响应式数据的 Vue 实例，例如 this。
已侦听属性： 使用 v-model 或 Vue.watch() 侦听的属性。

使用响应式数据

在 Table 组件中，确保数据是响应式的至关重要。以下是两种实现方法：

1. 使用 Vue 实例：

import { ref } from 'vue'

export default {
  setup() {
    // 创建一个响应式数据数组
    const tableData = ref([
      { id: 1, name: 'John', age: 30 },
      { id: 2, name: 'Mary', age: 25 }
    ])

    // ...
  }
}

2. 使用已侦听属性：

export default {
  data() {
    return {
      tableData: [
        { id: 1, name: 'John', age: 30 },
        { id: 2, name: 'Mary', age: 25 }
      ]
    }
  },
  watch: {
    tableData: {
      handler(newValue, oldValue) {
        // 数据变化时执行此函数
      },
      deep: true
    }
  }
}