遇到这么一个问题: 把data中的某个对象赋值给一个变量,修改变量,会同时把data中的对象也一同修改,所以,这个赋值应该就是引用了地址,贴个代码

<script>
export default {
data () {
return {
productLists: [
{
id: ,
product_name: '手机'
},
{
id: ,
product_name: '平板'
},
{
id: ,
product_name: '电脑'
}
]
}
},
methods: {
test () {
// 这里直接赋值给对象
let tmpArr = this.productLists
// 虽然这里删除tmpArr数组下表为1的,也就是id为2的数组,但是this.productLists也会删除,所以前面赋值不是真正的复制this.productLists,只是把this.productLists的引用地址赋值给变量,所以改变量也会导致另一方数据也会同时被修改
tmpArr.splice(, )
}
} }
</script>

解决方法:

<script>
export default {
data () {
return {
productLists: [
{
id: ,
product_name: '手机'
},
{
id: ,
product_name: '平板'
},
{
id: ,
product_name: '电脑'
}
]
}
},
methods: {
test () {
// 这里先把this.productLists转成JSON字符串,然后在转成JavaScript对象(深拷贝)
let tmpArr = JSON.parse(JSON.stringify(this.productLists))
// 这样就不会影响到this.productLists
tmpArr.splice(, )
}
}
}
</script>
 

关于Vue data对象赋值的问题的更多相关文章

  1. vue data对象添加新属性触发视图

    <template> <div class="wrap open"> <a>{{test01.name}}</a> <a> ...

  2. vue A对象赋值给B对象,修改B属性会影响到A问题

    实际在vue中  this.A = this.B,没有进行深层赋值,只是把this.A的地址指向了与this.B相同的地址,所有对于A的修改会影响到B. 解决相互影响的思路是在this.A必须是新建的 ...

  3. Vue实例的的data对象

    介绍 Vue的实例的数据对象data 我们已经用了很多了,数据绑定离不开data里面的数据.也是Vue的核心属性. 它是Vue绑定数据到HTML标签的数据源泉,另外Vue框架会自动监视data里面的数 ...

  4. vue 深度响应初步了解(检测data对象数据变化)

    当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为 getter/se ...

  5. vue单文件组件data选项的函数体获取vue实例对象

    因配置的关系,导致 vue的data选项中存在事件.而事件无法获取 vue 的实例对象:项目是单文件形式的,以下代码只是例子 new Vue({ el:..., data:{ a: { onevent ...

  6. 用TypeScript开发Vue——如何通过vue实例化对象访问实际ViewModel对象

    用TypeScript开发Vue--如何通过vue实例化对象访问实际ViewModel对象 背景 我个人很喜欢TypeScript也很喜欢Vue,但在两者共同使用的时候遇到一个问题. Vue的实例化对 ...

  7. Vue实例对象的数据选项

    前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data ...

  8. Vue实例对象的数据选项(火柴)

    前言 一般地,当模板内容比较简单的时候,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项. dat ...

  9. c# 利用反射动态给实体类对象赋值

    转:http://blog.sina.com.cn/s/blog_659a572b0100xp5s.html 例子如下 using System; using System.Collections.G ...

随机推荐

  1. 网络流 + 欧拉回路 = B - Sightseeing tour POJ - 1637

    B - Sightseeing tour POJ - 1637 https://blog.csdn.net/qq_36551189/article/details/80905345 首先要了解一下欧拉 ...

  2. Spring Boot 整合 Apache Dubbo

    Apache Dubbo是一款高性能.轻量级的开源 Java RPC 框架,它提供了三大核心能力:面向接口的远程方法调用,智能容错和负载均衡,以及服务自动注册和发现. 注意,是 Apache Dubb ...

  3. 从垃圾回收机制解析为什么局部内部类只能访问final修饰的局部变量以及为什么加final能解决问题

    我们先稍微看一下代码: 从这里的提示可以看到,必须要将a的修饰符变为final才行. 现在笔者就这一结果做出自己的分析: 首先来说,我们知道,方法被调用时会执行,当执行的时候,方法中的局部变量会加载到 ...

  4. request中跟路径有关的api的分析

    最近重在研究struts的源码,其中涉及到了request中的几个api,看了文档后还是觉得不清楚,所以在自己原来的工程中 测试了一下各个api的具体效果.在这里跟大家分享一下. 这是我具体测试的代码 ...

  5. Openwrt:添加"自定义软件包.ipk"

    我们已经尝试做的一件事情,是让移植软件到OpenWrt的操作变得非常容易.如果打开OpenWrt里的一个软件包的目录(OpenWrt/Package/* 或 OpenWrt/feeds/package ...

  6. InnoDB的ibd数据文件为什么比data_length+index_length+data_free的总和还要大?

    问题描述: 同事在给jiradb做mysqldump时,发现dump出来的文件只有10MB左右,而ibd文件占用磁盘空间100MB左右. 最初,我们猜测可能是delete操作导致了大量的磁盘碎片,以及 ...

  7. Android广播时间——实现强制下线功能

    目录 思路:强制下线功能需要先关闭掉所有的活动,然后回到登录界面. 步骤 1.关闭所有活动 2.创建BaseActivity类作为所有活动的父类,因为需要用ActivityCollector管理所有活 ...

  8. Java 将鼠标改为图片的两种方法

    一 图片跟着鼠标移动,鼠标隐藏 int x,y; addMouseMotionListener(this);//设置鼠标监听 public void paint(Graphics g) {  g.dr ...

  9. 【hdu1030】“坐标表示法”

    http://acm.hdu.edu.cn/showproblem.php?pid=1030 算法:以顶点为原点,建立坐标系,一个数可以唯一对应一个三元组(x, y, z),从任意一个点出发走一步,刚 ...

  10. TP5整合的阿里云短信接口

    现阶段,短信的应用主要就是用来验证下手机号是不是正常的手机号.只要涉及到用户手机号的问题的时候,都会做短信验证码来验证下改手机号是否是正常手机号.接下来就是操作步骤. 首先要在阿里云账号上开通短信功能 ...