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 相关文章推荐
JSQL SQLProxy 的 php 版本代码
May 05 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
AngularJS实现页面定时刷新
Mar 14 Javascript
JavaScript创建对象_动力节点Java学院整理
Jun 27 Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
Dec 21 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
vuex实现的简单购物车功能示例
Feb 13 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
layui form表单提交后实现自动刷新
Oct 25 Javascript
jQuery实现简单评论功能
Aug 19 jQuery
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
桌面中心(四)数据显示
2006/10/09 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
php权重计算方法代码分享
2014/01/09 PHP
php判断访问IP的方法
2015/06/19 PHP
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
方便实用的jQuery checkbox复选框全选功能简单实例
2013/10/09 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
利用JS实现点击按钮后图片自动切换的简单方法
2016/10/24 Javascript
Kendo Grid editing 自定义验证报错提示的解决方法
2016/11/18 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
很棒的vue弹窗组件
2017/05/24 Javascript
基于 Immutable.js 实现撤销重做功能的实例代码
2018/03/01 Javascript
详解基于node.js的脚手架工具开发经历
2019/01/28 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
JavaScript如何实现图片处理与合成
2020/05/29 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
详解python里使用正则表达式的全匹配功能
2017/10/19 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
python计算两个地址之间的距离方法
2018/06/09 Python
利用Pyhton中的requests包进行网页访问测试的方法
2018/12/26 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
python爬取豆瓣电影排行榜(requests)的示例代码
2021/02/18 Python
康帕斯酒店预订:Compass Hospitality(支持中文)
2018/08/23 全球购物
MYSQL支持事务吗
2013/08/09 面试题
人力资源管理专业毕业生自我评价
2013/09/21 职场文书
2014基层党员干部学习全国两会心得体会
2014/03/17 职场文书
伊琍体标语
2014/06/25 职场文书
人事行政助理岗位职责
2015/04/11 职场文书
离婚被告代理词
2015/05/23 职场文书
Mysql Innodb存储引擎之索引与算法
2022/02/15 MySQL