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 相关文章推荐
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
js获取当前select 元素值的代码
Apr 19 Javascript
JQuery动态给table添加、删除行 改进版
Jan 19 Javascript
JavaScript call apply使用 JavaScript对象的方法绑定到DOM事件后this指向问题
Sep 28 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
JavaScript中document.referrer的用法详解
Jul 04 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
小程序多图列表实现性能优化的方法步骤
May 28 Javascript
vue实现简单的日历效果
Sep 24 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 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
cakephp打印sql语句的方法
2015/02/13 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
理运用命名空间让js不产生冲突避免全局变量的泛滥
2014/06/15 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
javascript cookie基础应用之记录用户名的方法
2016/09/20 Javascript
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
2017/01/12 NodeJs
node.js中fs.stat与fs.fstat的区别详解
2017/06/01 Javascript
AngularJS 仿微信图片手势缩放的实例
2017/09/28 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
详解Vue.js自定义tipOnce指令用法实例
2018/12/19 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
vue动态合并单元格并添加小计合计功能示例
2020/11/26 Vue.js
python3.5 email实现发送邮件功能
2018/05/22 Python
Python IDLE清空窗口的实例
2018/06/25 Python
python pygame模块编写飞机大战
2018/11/20 Python
解析Python的缩进规则的使用
2019/01/16 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
python实现大文本文件分割
2019/07/22 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
Python列表倒序输出及其效率详解
2020/03/04 Python
python 检测nginx服务邮件报警的脚本
2020/12/31 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
介绍一下如何利用路径遍历进行攻击及如何防范
2014/01/19 面试题
毕业生文员求职信
2013/11/03 职场文书
发展部经理职责规定
2014/02/22 职场文书
教师党员自我评价范文
2015/03/04 职场文书
优秀员工自荐书
2015/03/06 职场文书
2015年教务主任工作总结
2015/07/22 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书