精选文章 vue数据改变了,视图不更新不刷新问题

vue数据改变了,视图不更新不刷新问题

作者:小糖穿越火线 时间: 2019-11-05 12:11:24
小糖穿越火线 2019-11-05 12:11:24

vue数据改变了,视图不更新不刷新问题

描述:在对象中添加一个属性 seen,初始想法使用for循环添加 seen 属性,然后改变这个属性去更新视图,然后发现不行。

解决,使用$set:

this.$set(item, 'seen', false)
代码:
// 请求来的数据,在 res.results 中没有seen这个属性,添加这个属性
this.worklogs = res.results
res.results.forEach(item => {
  this.$set(item, 'seen', false)
})
// 改变这个属性来控制显示隐藏
showDesc(log) {
  log.seen = !log.seen
}

对象更改检测

在一个组件实例中,只有在data里初始化的数据才是响应的,Vue不能检测到对象属性的添加或删除,没有在data里声明的属性不是响应的。

Vue不允许在已经创建的实例上动态添加根级响应式属性,但是可以使用$set方法将相应属性添加到嵌套的对象上。

已经声明的属性正常响应的,没有声明的属性虽然值发生了改变,console也能打印出来,但并不能响应到视图上。需要用Vue.set(object, key, value) 或 this.$set(object,key,value) 方法将响应属性添加到嵌套的对象上。

注意:object 必须是在data中已经声明的对象。

// this.form.testB = 'desc' // 无效
this.$set(this.form,'testB ','desc') // 动态添加
// 或者 Vue.set(vm.form,'testB ','desc')

Object.assign方法,向嵌套对象上添加多个属性。object.assign方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象,并返回目标对象。

语法:vm.object = Object.assign( { } , vm.object , {a:' 1 ', b:' 2 ' }) 

注意:object 必须是在data中已经声明的对象。

this.form1 = Object.assign({}, this.form1, {f1:'f1',f2:'f2'})

数组更改问题

vue检测不到变动问题:1、利用索引直接设置一个项;2、修改数组长度。

1、

changeMe(index) {
  // this.trees[index] = 'xxx' // 无响应
  this.$set(this.trees, index, 'xxx') // 有响应
  // this.trees.splice(index, 1, 'xxx') // 有响应
}
2、
// 改变数组长度
// this.trees.length = 2 // 无响应
this.trees.splice(2) // 有响应

 

感谢作者:

https://www.cnblogs.com/YuKiee/p/9681151.html

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:FZU - 2150 Fire Game(双路bfs)

下一篇:Windows10安装git环境

您可能感兴趣

  • 工作流学习2(书本)

    1、流程引擎的创建。 1.1、ProcessEngineConfiguration的buildProcessEngine方法 使用ProcessEngineConfiguration的create方法可以得到ProcessEngineConfiguration的实例。ProcessEngineConfiguration中提供了一个buildProcessEngine方法,该方法返回一个Pro...

  • Yolo系列详解

    零、图像基本概念 图像表示为二维的矩阵  灰阶图像 0-255,0表示黑色,255表示白色,其余表示灰色。 图像的坐标轴   彩色图像  注意:颜色信息对于任务有时候有用,有时候没用。 一、什么是目标检测 目标检测是计算机视觉中的经典的原子问题,即通过输入的图像来完成物体的检测,它需要解决两个问题: 物体在哪里 物体是什么 目标检测算法的传统实现 sift hog 等算法。这些算法的...

  • grafana使用MYSQL数据源展示

    新增数据源 Grafana支持许多不同的数据源。每个数据源都有一个特定的查询编辑器,该编辑器定制的特性和功能是公开的特定数据来源。 官方支持以下数据源:Graphite,InfluxDB,OpenTSDB,Prometheus,Elasticsearch,CloudWatch和KairosDB。 每个数据源的查询语言和能力都是不同的。 你可以把来自多个数据源的数据组合到一个仪表板dashbo...

  • 图神经网络越深,表现就一定越好吗?

    2020-08-01 03:01:24 编译 | 陈彩娴 编辑 | 丛 末 数十层甚至数百层神经网络的应用,是深度学习的重要标志之一。但现实情况却远非如此:比如今年被视作机器学习领域最火热的研究方向之一——图神经网络,大多数都只运用了寥寥几层网络。 一般思路里,我们会认为图神经网络越深,效果就会越好。然而,日前帝国理工学院教授Michael Bronstein 发出了灵魂拷问:图神经网络的深...

  • 新基建呼唤新底座,华为下一代数据中心为何“底”气十足

    今年以来,“新基建”按下“加速键”,不少同“新基建”相关的行业展现出良好的发展前景。在新旧动能转换的关键时刻,“新基建”成为打造中国经济新增长的关键引擎。长远来看,新基建作为数字经济的骨干网络,肩负着支撑起整个数字经济运转的重任。 作为新基建七大领域之一,数据中心与5G、新能源、人工智能、工业互联网等有着天然紧密联系,承担着数字流的接收、处理、转发与存储重任,乃名副其实的新基建底座,关系着整...

  • K8s CNI网络最强对比:Flannel、Calico、Canal和W

    介 绍 网络架构是Kubernetes中较为复杂、让很多用户头疼的方面之一。Kubernetes网络模型本身对某些特定的网络功能有一定要求,但在实现方面也具有一定的灵活性。因此,业界已有不少不同的网络方案,来满足特定的环境和要求。 CNI意为容器网络接口,它是一种标准的设计,为了让用户在容器创建或销毁时都能够更容易地配置容器网络。在本文中,我们将集中探索与对比目前最流行的CNI插件:Flan...

  • 美团点评移动网络优化实践

    本文根据第16期美团点评技术沙龙“移动开发实践(上海站)”演讲内容整理而成。 第18期沙龙:高可用系统背后的基础架构(3月25日)火热来袭!快快点击报名吧。 网络优化对于App产品的用户体验至关重要,与公司的运营和营收息息相关。这里列举两个公开的数据: “页面加载超过3秒,57%的用户会离开。” “Amazon页面加载延长1秒,一年就会减少16亿美金营收。” 在做网络优化前,我们首先要为网络...

  • 零基础入门天池NLP赛事之——新闻文本分类(6)

    基于深度学习的文本分类 一、学习目标: 了解Transformer的原理和基于预训练语言模型(Bert)的词表示 学会Bert的使用,具体包括pretrain和finetune 二、文本表示方法Part4: Transformer原理 Transformer是在"Attention is All You Need"中提出的,模型的编码部分是一组编码器的堆叠(论文中依次堆叠六个编码器),模型的...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。