vue （uni-app）踩坑，数据改变，视图不变

野性酷女 2023-03-02 07:50 5阅读 0赞

前景：  
由于要做一个展开效果，我打算在后端返回的数据中加一个字段用来判断每一项是否展开，如图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211Z2UxMTYxMTA1NDAz_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20200728134602849.png]  
![在这里插入图片描述][20200728134602812.png]  
很明显，数据改变了，但视图并没有改变，这是由于数据是后追加的，并没有被vue追踪。  
所以需要使用 **this.$set()**  
根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

用法如下：
    Vue.set( target, propertyName/index, value )
    参数：
    
    { Object | Array} target
    { string | number} propertyName/index
    { any} value

修改后代码如下：  
![在这里插入图片描述][20200728135205804.png]  
![在这里插入图片描述][20200728135205762.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L211Z2UxMTYxMTA1NDAz_size_16_color_FFFFFF_t_70]: /images/20230208/9e2d810af0ed4732bcdc5c0795e5e729.png
[20200728134602849.png]: /images/20230208/711b715ca3e5464c866b4505d9c2299c.png
[20200728134602812.png]: /images/20230208/cbbfc1a7846e4d72a7e0d3e40ee0deb6.png
[20200728135205804.png]: /images/20230208/fd20ee772063419183cc102a5223a865.png
[20200728135205762.png]: /images/20230208/7ee397dd750a40a1899e6d19188d5837.png

发表评论取消回复

表情：

评论列表（有 0 条评论，5人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue更改了数据但是视图层却不发生改变

数组的更新检测 1：push() 尾加 2:pop() 尾删 3： shift() 头加 4：unshift() 头删 5：splice() 截取/增加/修

矫情吗；*/ 2023年06月25日 10:05/ 0 赞/ 11 阅读

相关 vue踩坑记

从oneNote上转过来，方便查看： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

ゝ一世哀愁。/ 2023年06月11日 03:12/ 0 赞/ 57 阅读

相关 vue （uni-app）踩坑，数据改变，视图不变

前景：由于要做一个展开效果，我打算在后端返回的数据中加一个字段用来判断每一项是否展开，如图所示： ![在这里插入图片描述][watermark_type_ZmFuZ3

野性酷女/ 2023年03月02日 07:50/ 0 赞/ 6 阅读

相关 Vue数据更新视图不更新

Vue数据更新视图不更新这里写自定义目录标题知识拓展数组数据变动，使用某些方法操作数组，变动数据时，有些方法无法被vue监测

阳光穿透心脏的1/2处/ 2022年12月20日 08:49/ 0 赞/ 201 阅读

相关 uniapp picker踩坑range-key失效

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9f

谁借莪１个温暖的怀抱￠/ 2022年12月01日 14:10/ 0 赞/ 288 阅读

相关 vue 使用process 踩坑

配置全局process 变量在项目目录下新建文件 .env.xxx xxx是运行环境的名字 .env.devlopment 是默认运行的环境 devlopmen

末蓝、/ 2022年10月31日 12:17/ 0 赞/ 208 阅读

相关 uniapp开发聊天APP踩坑记录

最近工作重心转移到了uniapp上，有一说一，这个框架跨端确实牛逼，一套代码能一次编译到多端使用。但随之而来的兼容性问题也是层出不穷，同样的在面临APP底层的改动也显得力不从心

秒速五厘米/ 2022年10月21日 03:44/ 0 赞/ 273 阅读

相关 vue + springmvc 踩坑记录

需求： vue 传递数据到后台，为了节省前台代码，以及方便后台的取值，想要采取传递对象的方式传值。解决方案：前台 vue采用URLSearchParams()对象封

蔚落/ 2022年04月25日 07:38/ 0 赞/ 368 阅读

相关 Vue踩坑记

一、Vue实例 > 生命周期钩子在开发程序的时候，有时候喜欢先不写实现，先将组成的部分定义好，但在写Vue生命周期钩子的时候出现了错误。错误信息vue.es

矫情吗；*/ 2022年02月04日 07:39/ 0 赞/ 558 阅读

相关 vue+echart踩坑记

需求描述：页面中按钮控制上传文件后显示数据，图表显示功能点描述：控制显示隐藏(没上传文件前不显示图表),获取数据渲染图表出现问题： 1. v-if控制显示隐藏发

柔光的暖阳◎/ 2021年11月09日 15:08/ 0 赞/ 471 阅读