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的商品展示放大镜
Aug 07 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
javascript date格式化示例
Sep 25 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
jQuery实现布局高宽自适应的简单实例
May 28 Javascript
js判断浏览器是否支持严格模式的方法
Oct 04 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
深入理解react-router 路由的实现原理
Sep 26 Javascript
微信小程序日历弹窗选择器代码实例
May 09 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 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
PHP无刷新上传文件实现代码
2011/09/19 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
JavaScript Title、alt提示(Tips)实现源码解读
2010/12/12 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
2013/07/30 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
在js文件中写el表达式取不到值的原因及解决方法
2013/12/23 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
2015/04/13 Javascript
jquery实现移动端点击图片查看大图特效
2020/09/11 Javascript
完善的jquery处理机制
2016/02/21 Javascript
Es6 写的文件import 起来解决方案详解
2016/12/13 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
Json实现传值到后台代码实例
2020/06/30 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
python处理文本文件并生成指定格式的文件
2014/07/31 Python
Python获取文件ssdeep值的方法
2014/10/05 Python
利用pyinstaller或virtualenv将python程序打包详解
2017/03/22 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
基于python3抓取pinpoint应用信息入库
2020/01/08 Python
keras 回调函数Callbacks 断点ModelCheckpoint教程
2020/06/18 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
英国户外装备商店:Ultimate Outdoors
2019/05/07 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
工作收入证明模板
2015/06/12 职场文书