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 相关文章推荐
JavaScript中void(0)的具体含义解释
Feb 27 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
Mar 21 Javascript
vue实现todolist单页面应用
Apr 11 Javascript
利用node.js如何搭建一个简易的即时响应服务器
May 28 Javascript
对node.js中render和send的用法详解
May 14 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 Javascript
如何实现一个简易版的vuex持久化工具
Sep 11 Javascript
微信小程序实现音乐播放器
Nov 20 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中JSON的使用方法
2015/04/30 PHP
php对数组内元素进行随机调换的方法
2015/05/12 PHP
PHP获取音频文件的相关信息
2015/06/22 PHP
PHP操作mysql数据库分表的方法
2016/06/09 PHP
javascript fullscreen全屏实现代码
2009/04/09 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
JS异常处理的一个想法(sofish)
2013/03/14 Javascript
jquery 延迟执行实例介绍
2013/08/20 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
jquery实现全屏滚动
2015/12/28 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
jquery使用FormData实现异步上传文件
2018/10/25 jQuery
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
多种类型jQuery网页验证码插件代码实例
2021/01/09 jQuery
Python set常用操作函数集锦
2017/11/15 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
解决python执行较大excel文件openpyxl慢问题
2020/05/15 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
植树节口号
2014/06/21 职场文书
办理房产证委托书
2014/09/18 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
党性修养心得体会2016
2016/01/21 职场文书
商业计划书范文
2019/04/24 职场文书
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers