首页 > 其他分享 >vue直接赋值后数据不更新

vue直接赋值后数据不更新

时间:2022-08-31 17:57:27浏览次数:52  
标签:arr vue obj vm 更新 数组 model 赋值

在写vue的时候,存在某些情况,明明赋值给model了,页面数据不变化。

原因我就不仔细分析了,下面直接上解决办法:

1.1、Vue 不能检测以下变动的数组

当你利用索引直接设置一个项时,例如

vm.items[indexOfItem] = newValue

当你修改数组的长度时,例如

vm.items.length = newLength

 === 解决方案

当第一种情况需求时,可以使用

this.$set(this.arr,index,newVal)

this.arr = [新数组]

2.1、Vue 不能检测以下变动的对象

当你修改一个初始化时,不存在的对象里的属性时

this.obj.b = 3

原因:在不刷新页面父子组件的情况下,二次触发就可以,因为由于第一次的触发渲染,但第一次并没有触发,只有第二次会显示。

=== 解决方案

当修改一个初始化已存在的属性,可以直接检测到动态变化

this.obj.a = 3

上面不能检测到的另一种解决方案

this.$set(this.model,'age',12)

this.obj = { a: 3, b: 4 }

当需要添加多个对象时

Object.assign({},this.model,{age:12,name:'wee'})

3.1 数组、对象克隆

把数组转换成json然后再转换回来vm.arr=JSON.parse(JSON.stringify(vm.arr));

 

标签:arr,vue,obj,vm,更新,数组,model,赋值
From: https://www.cnblogs.com/zhangliang88/p/16644020.html

相关文章

  • VUE学习2
    目录分析public目录index.html是起始的html文件#这是关键<divid="app"></div>src目录main.js是Vue项目的入口文件属性props:接受父组件传过来的值props:{m......
  • vue3+ts项目声明响应式数据
    说明:在项目开发中,需要声明响应式数据来实现界面的响应从而实现前后端数据的交互。我们主要分为两类来举例。基本数据类型声明方式letxxx=ref<type>('defaultValue'......
  • Vue中报npm WARN idealTree Removing dependencies.element-ui in favor of devDepend
    在添加element-ui的时候我是用的是:npmielement-ui--save-dev或npmielement-ui-S都会报错npmWARNidealTreeRemovingdependencies.element-uiinfavorofdevD......
  • Vue Cli4.5版本手机端适配(rem)
    1.安装amfe-flexible(根据屏幕动态改变根元素font-size,postcss-pxtorem把代码中px转为rem)npmiamfe-flexible-S2.安装postcss-pxtorem(一款PostCSS插件,用于将px单位转......
  • 安装vue环境
    1)获取node.js安装包Node.js安装包及源码下载地址为:https://nodejs.org/en/download/(2)Linux上安装Node.jswgethttps://nodejs.org/dist/v16.13.1/node-v16.13.1-linu......
  • VUE---公钥私钥加密解密
    最近在开发一些项目,前后端数据分离开发项目,涉及到数据的安全性,需要考虑:1、前端提交数据,进行加密,后端解密。2、前端渲染数据,进行解密,后端加密。第一步:生成加密/解密公钥......
  • vue-cli 配置优化
    本文整理了一些vue开发中常用vue-cli配置,使用的vue-cli版本为3.11.0,主要内容包括:移除preload与prefetch使用webpack-bundle-analyzer做打包分析使用ters......
  • 区块相隔虽一线,俱在支付同冶熔,Vue3.0+Tornado6前后端分离集成Web3.0之Metamask区块
    最近几年区块链技术的使用外延持续扩展,去中心化的节点认证机制可以大幅度改进传统的支付结算模式的经营效率,降低交易者的成本并提高收益。但不能否认的是,区块链技术也存在......
  • Ant Design Vue 表单之a-input属性
    <a-form-itemlabel="姓名"><a-inputv-model.trim="name"placeholder="":max-length='10' :read-only='true'/>......
  • 序列化器:反序列换-添加和更新数据操作
    前端传到后端需要反序列化,后端传到前端需要序列化正常需要serializer两次:fromdjango.viewsimportViewfrom.modelsimportStudentfrom.serializersimportStude......