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

问题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()
相关推荐
类人_猿1 小时前
ASP.NET Web(.Net Framework) Http服务器搭建以及IIS站点发布
前端·iis·asp.net·.net·http站点服务器
组态软件4 小时前
web组态软件
前端·后端·物联网·编辑器·html
前端Hardy4 小时前
HTML&CSS:MacBook Air 3D 动画跃然屏上
前端·javascript·css·3d·html
汪小白JIY5 小时前
【VUE3】VUE组合式(响应式)API常见语法
vue.js·vue3·语法
loey_ln5 小时前
观察者模式和发布订阅模式
javascript·观察者模式·react.js
cnsxjean7 小时前
SpringBoot集成Minio实现上传凭证、分片上传、秒传和断点续传
java·前端·spring boot·分布式·后端·中间件·架构
ZL_5677 小时前
uniapp中使用uni-forms实现表单管理,验证表单
前端·javascript·uni-app
沉浮yu大海8 小时前
Vue.js 组件开发:构建可重用且高效的 UI 块
前端·vue.js·ui
代码欢乐豆8 小时前
软件工程第13章小测
服务器·前端·数据库·软件工程
sunly_8 小时前
Flutter:启动屏逻辑处理02:启动页
android·javascript·flutter