vue 对象添加或删除成员时无法实时更新的解决方法


Posted in Javascript onMay 01, 2019

前阵子将项目搬上Vue的时候偶遇一个突发问题

当对象添加或删除成员时页面无法实时更新渲染,但是数组是正常的

目测是ob没有监听到对象的成员有变化

查看一些大家的求助回答是说ob监听的是数组length的变动 对象默认没有length 新增成员时不会自增length

所以监听不到对象的变化 最近大脑过于疲惫 懒得看文档了。。。

不多废话 解决方式直接上代码

在实例内部可以用$set和$delete

this.$set(this.age,'age',18);
this.$delete(this.age,'age');

也可以直接调用Vue的set和delete

let vm = new Vue({
  el : '#app',
  data : {
    age:{}
  }
});
Vue.set(vm.age,'age',18);
Vue.delete(vm.age,'age');

PS:vue给数组和对象进行增加删除字段不更新数据的解决方法 — Vue.set(object, key, value)

组件基本代码:

<style lang="sass">

</style>
<template>
<div>
  <div>
    <div>

    </div>
  </div>
</div>
</template>
<script>
  export default {
    data(){
      return {

      }
    },
    methods: {
      ceshi(){

      }
    }
  }
</script>

1.数组的增加,删除(数组的push等方法排除)

</style>
<template>
<div>
  <div>
    <div>
      <div v-for="item in items">
        <span>{{ item }}</span>
      </div>
      <button @click="ceshi">anniu</button>
    </div>
  </div>
</div>
</template>

<script>
  export default {
    data(){
      return {
        items: [11,22],
        obj: { a: 'aa', b: 'bb' }
      }
    },
    methods: {
      ceshi(){
        this.items[2] = 33; // 这样的写法数据是无法重新渲染的
      }
    }
  }
</script>

点击按钮操作ceshi事件前后,没发生变化

vue 对象添加或删除成员时无法实时更新的解决方法

解决方法:

就是利用数据的push方法是可以实现的

利用Vue.set方法

具体实现如下:

methods: {
  ceshi(){
    this.$set(this.items, 2, 33)
  }
},

同理,如果items: [{a: ‘11'}] ?> items: [{a: ‘11', b: ‘22'}]

<div v-for="item in items">
 <span v-for="(i, j) in item">{{ i }}--{{ j }}</span>
</div>

this.items[0] = Object.assign({}, this.items[0], { b: '22' });
this.$set(this.items, 0, this.items[0]);

2.给对象增加新属性(同理)

<template>
  <div>
    <div v-for="item in obj">
     <span>{{ item }}</span>
    </div>
  </div>
</template>

data(){
  return {
    obj: { a: 'aa', b: 'bb' }
  }
}

methods: {
  ceshi(){
    this.obj['c'] = '000'; // 不起作用
    this.$set(this.obj, 'c', '000'); //起作用 
  }
},

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
Feb 26 Javascript
基于JQuery的浮动DIV显示提示信息并自动隐藏
Feb 11 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
详谈javascript异步编程
Feb 21 Javascript
Google 地图叠加层实例讲解
Aug 06 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
javascript中如何判断类型汇总
May 14 Javascript
使用vue实现一个电子签名组件的示例代码
Jan 06 Javascript
JS中FormData类实现文件上传
Mar 27 Javascript
JavaScript实现简单的音乐播放器
Aug 14 Javascript
JavaScript强制类型转换和隐式类型转换操作示例
May 01 #Javascript
Vue源码之关于vm.$delete()/Vue.use()内部原理详解
May 01 #Javascript
Vue.extend实现挂载到实例上的方法
May 01 #Javascript
JS html事件冒泡和事件捕获操作示例
May 01 #Javascript
JS实现的贪吃蛇游戏案例详解
May 01 #Javascript
javascript原型链学习记录之继承实现方式分析
May 01 #Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 #Javascript
You might like
第一个无线电台是由谁发明的
2021/03/01 无线电
如何隐藏你的.php文件
2007/01/04 PHP
php文件上传的例子及参数详解
2013/12/12 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
php实现复制移动文件的方法
2015/07/29 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
2009/04/24 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
JavaScript仿支付宝密码输入框
2015/12/29 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
element el-input directive数字进行控制
2018/10/11 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
教你用python3根据关键词爬取百度百科的内容
2016/08/18 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
pytorch 自定义卷积核进行卷积操作方式
2019/12/30 Python
使用Python发现隐藏的wifi
2020/03/04 Python
Python如何定义有默认参数的函数
2020/08/10 Python
css3通过scale()、rotate()实现放大、旋转
2020/03/19 HTML / CSS
教师岗位职责范本
2013/12/29 职场文书
工作推荐信范文
2014/05/10 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
煤矿百日安全活动总结
2015/05/07 职场文书
高中开学感言
2015/08/01 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
践行三严三实心得体会(2016推荐篇)
2016/01/06 职场文书
2019旅游导游工作总结
2019/06/27 职场文书