vue3对象reactive()数据改变页面不刷新

Cc_Debugger2023-11-30 21:10

问题vue3对象reactive()数据改变页面不刷新

首先定义一个对象

javascript 复制代码

const tableData = reactive({ })

原因

调用后端接口赋值后页面不刷新

reactive生成的响应式数据属性

但是赋值后变成了普通数据

导致失去响应式

页面无法更新

解决方法

1.里面定义一个属性a并赋值给属性a

javascript 复制代码

const tableData = reactive({ a: [] })

2.for of循环push到reactive数据，不破坏数据结构

javascript 复制代码

const tableData = reactive()

const getData = async () => {
  let { data } = await http.get('/table');
  for (let i of data.data){
    tableData.push(i);
  }
  console.log(tableData);
}

getData()