vue将对象新增的属性添加到检测序列的方法

 更新时间:2018年02月24日 14:41:35   作者:twmay006  
下面小编就为大家分享一篇vue将对象新增的属性添加到检测序列的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

vue中将对象中新增的属性增加到检测序列中

deepCopy(o1, o2) { // 将o2的内容拷贝给data中的o1
   var key, i
   if (o2 instanceof Array) {
    for (i = 0; i < o2.length; i++) {
     if (o2[i] instanceof Array) {
      this.$set(o1, i, [])
      this.deepCopy(o1[i], o2[i])
     }
     else if (o2[i] instanceof Object) {
      this.$set(o1, i, {})
      this.deepCopy(o1[i], o2[i])
     }
     else {
      this.$set(o1, i, o2[i])
     }
    }
   }
   else if (o2 instanceof Object) {
    for (key in o2) {
     if (o2[key] instanceof Array) {
      this.$set(o1, key, [])
      this.deepCopy(o1[key], o2[key])
     }
     else if (o2[key] instanceof Object) {
      this.$set(o1, key, {})
      this.deepCopy(o1[key], o2[key])
     }
     else {
      this.$set(o1, key, o2[key])
     }
    }
   }
   else {
    o1 = o2
   }
}

由于 Vue 不允许动态添加根级响应式属性,所以你必须在初始化实例前声明根级响应式属性,哪怕只是一个空值

如果一个属性没有事先声明,后面再增加,他不能检测到变化,对于一些固定的结构,是可以检测到变化的。比如我知道一个obj里面必然有key1、key2属性,我可以事先初始化。如果这些东西是动态的,我没法事先声明。后面再增加,vue没法检测到变化了。

这时将你已经在data中声明的变量和你要赋给这个变量的值作为参数传进该函数就行了

以上这篇vue将对象新增的属性添加到检测序列的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • el-table表格动态合并相同数据单元格(可指定列+自定义合并)

    el-table表格动态合并相同数据单元格(可指定列+自定义合并)

    工作时遇到的el-table合并单元格的需求,本文主要介绍了el-table表格动态合并相同数据单元格(可指定列+自定义合并),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • vue el-upload上传文件的示例代码

    vue el-upload上传文件的示例代码

    这篇文章主要介绍了vue el-upload上传文件的示例代码,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-12-12
  • 高频率Vue面试题汇总以及答案

    高频率Vue面试题汇总以及答案

    vue是组件化开发框架,所以对于vue应用来说组件间的数据通信非常重要,下面这篇文章主要给大家介绍了关于高频率Vue面试题以及答案的相关资料,需要的朋友可以参考下
    2023-02-02
  • 使用ElementUI el-upload实现一次性上传多个文件

    使用ElementUI el-upload实现一次性上传多个文件

    在日常的前端开发中,文件上传是一个非常常见的需求,尤其是在用户需要一次性上传多个文件的场景下,ElementUI作为一款非常优秀的Vue.js 2.0组件库,为我们提供了丰富的UI组件,本文介绍了如何使用ElementUI el-upload实现一次性上传多个文件,需要的朋友可以参考下
    2024-08-08
  • Vue获取当前系统日期(年月日)的示例代码

    Vue获取当前系统日期(年月日)的示例代码

    发中会有要获取当前日期的需求,有的是获取到当前月份,有的是精确到分秒,在 Vue 开发中,获取当前时间是一项常见的需求,本文将深入探讨Vue获取当前系统日期(年月日),帮助您更好地利用当前时间,需要的朋友可以参考下
    2024-01-01
  • 关于el-scrollbar滚动条初始化不显示的问题及解决

    关于el-scrollbar滚动条初始化不显示的问题及解决

    这篇文章主要介绍了关于el-scrollbar滚动条初始化不显示的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 使用vue构建多页面应用的示例

    使用vue构建多页面应用的示例

    这篇文章主要介绍了使用vue构建多页面应用的示例,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-10-10
  • Vue中常见的几种传参方式小结

    Vue中常见的几种传参方式小结

    Vue组件的使用不管是在平常工作还是在面试面试中,都是频繁出现的,下面这篇文章主要给大家介绍了关于Vue中常见的几种传参方式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • Vue下载不同文件的几种方式总结

    Vue下载不同文件的几种方式总结

    在Vue项目中实现文件下载有多种方式,包括使用window.open、<a>标签、axios、FetchAPI、自定义$download方法以及创建a标签等,每种方法都有其适用场景,开发者可以根据项目需求选择最合适的方式
    2025-01-01
  • Vue中用watch一次监听多个值变化的示例详解

    Vue中用watch一次监听多个值变化的示例详解

    在Vue中,watch 本身不能监听多个变量,但我们可以通过返回具有计算属性的对象然后监听该对象,从而实现一次性“监听多个变量”,本文给大家介绍了Vue中用watch一次监听两个值变化的示例,需要的朋友可以参考下
    2024-01-01

最新评论