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实现自定义风格的滑动条实现代码
Apr 26 Javascript
window.onload和$(function(){})的区别介绍
Oct 30 Javascript
js 限制input只能输入数字、字母和汉字等等
Dec 18 Javascript
深入分析JQuery和JavaScript的异同
Oct 23 Javascript
jQuery操作表单常用控件方法小结
Mar 23 Javascript
js实现跨域的多种方法
Dec 25 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 Javascript
JS中==、===你分清楚了吗
Mar 04 Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 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 is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
php小型企业库存管理系统的设计与实现代码
2011/05/16 PHP
php 获取SWF动画截图示例代码
2014/02/10 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
jquery验证表单中的单选与多选实例
2013/08/18 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
Node.js读写文件之批量替换图片的实现方法
2016/09/07 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
Node.js实现简单管理系统
2019/09/23 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
Python入门之modf()方法的使用
2015/05/15 Python
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
详解Python pygame安装过程笔记
2017/06/05 Python
python正则表达式及使用正则表达式的例子
2018/01/22 Python
django_orm查询性能优化方法
2018/08/20 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
python连接mongodb数据库操作数据示例
2020/11/30 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
美国婴儿和儿童家具网上商店:ABaby.com
2018/07/02 全球购物
幼儿园三八妇女节活动方案
2014/03/11 职场文书
社区义诊活动总结
2014/04/30 职场文书
化工厂员工工作总结
2015/10/15 职场文书
争做文明公民倡议书
2019/06/24 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python