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 相关文章推荐
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
jquery制作漂亮的弹出层提示消息特效
Dec 23 Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
vue如何从接口请求数据
Jun 22 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
Vue中插入HTML代码的方法
Sep 21 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
详解vue-element Tree树形控件填坑路
Mar 26 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
在vue中使用Base64转码的案例
Aug 07 Javascript
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 Vue.js
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 翻页 实例代码
2009/08/07 PHP
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
apache mysql php 源码编译使用方法
2012/05/03 PHP
php全局变量和类配合使用深刻理解
2013/06/05 PHP
解析strtr函数的效率问题
2013/06/26 PHP
一张表搞清楚php is_null、empty、isset的区别
2015/07/07 PHP
window.open的功能全解析
2006/10/10 Javascript
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
jQuery 页面载入进度条实现代码
2009/02/08 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
微信小程序实现MUI数字输入框效果
2018/01/31 Javascript
webpack将js打包后的map文件详解
2018/02/22 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
Nodejs调用Dll模块的方法
2018/09/17 NodeJs
详解element-ui中表单验证的三种方式
2019/09/18 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
vue 实现用户登录方式的切换功能
2020/04/14 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
2020/11/03 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
2020/11/12 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
一个Python最简单的接口自动化框架
2018/01/02 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
Pycharm代码无法复制,无法选中删除,无法编辑的解决方法
2018/10/22 Python
python编写计算器功能
2019/10/25 Python
Python实现钉钉订阅消息功能
2020/01/14 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
房屋转让协议书
2014/04/11 职场文书
党员活动日总结
2014/05/05 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
高中信息技术教学反思
2016/02/16 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript
Python pygame实现中国象棋单机版源码
2021/06/20 Python
python自动化操作之动态验证码、滑动验证码的降噪和识别
2021/08/30 Python
Python的三个重要函数详解
2022/01/18 Python