关于Vue data对象赋值的问题
遇到这么一个问题: 把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对象赋值的问题的更多相关文章
- vue data对象添加新属性触发视图
<template> <div class="wrap open"> <a>{{test01.name}}</a> <a> ...
- vue A对象赋值给B对象,修改B属性会影响到A问题
实际在vue中 this.A = this.B,没有进行深层赋值,只是把this.A的地址指向了与this.B相同的地址,所有对于A的修改会影响到B. 解决相互影响的思路是在this.A必须是新建的 ...
- Vue实例的的data对象
介绍 Vue的实例的数据对象data 我们已经用了很多了,数据绑定离不开data里面的数据.也是Vue的核心属性. 它是Vue绑定数据到HTML标签的数据源泉,另外Vue框架会自动监视data里面的数 ...
- vue 深度响应初步了解(检测data对象数据变化)
当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用Object.defineProperty把这些属性全部转为 getter/se ...
- vue单文件组件data选项的函数体获取vue实例对象
因配置的关系,导致 vue的data选项中存在事件.而事件无法获取 vue 的实例对象:项目是单文件形式的,以下代码只是例子 new Vue({ el:..., data:{ a: { onevent ...
- 用TypeScript开发Vue——如何通过vue实例化对象访问实际ViewModel对象
用TypeScript开发Vue--如何通过vue实例化对象访问实际ViewModel对象 背景 我个人很喜欢TypeScript也很喜欢Vue,但在两者共同使用的时候遇到一个问题. Vue的实例化对 ...
- Vue实例对象的数据选项
前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data ...
- Vue实例对象的数据选项(火柴)
前言 一般地,当模板内容比较简单的时候,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项. dat ...
- c# 利用反射动态给实体类对象赋值
转:http://blog.sina.com.cn/s/blog_659a572b0100xp5s.html 例子如下 using System; using System.Collections.G ...
随机推荐
- 网络流 + 欧拉回路 = B - Sightseeing tour POJ - 1637
B - Sightseeing tour POJ - 1637 https://blog.csdn.net/qq_36551189/article/details/80905345 首先要了解一下欧拉 ...
- Spring Boot 整合 Apache Dubbo
Apache Dubbo是一款高性能.轻量级的开源 Java RPC 框架,它提供了三大核心能力:面向接口的远程方法调用,智能容错和负载均衡,以及服务自动注册和发现. 注意,是 Apache Dubb ...
- 从垃圾回收机制解析为什么局部内部类只能访问final修饰的局部变量以及为什么加final能解决问题
我们先稍微看一下代码: 从这里的提示可以看到,必须要将a的修饰符变为final才行. 现在笔者就这一结果做出自己的分析: 首先来说,我们知道,方法被调用时会执行,当执行的时候,方法中的局部变量会加载到 ...
- request中跟路径有关的api的分析
最近重在研究struts的源码,其中涉及到了request中的几个api,看了文档后还是觉得不清楚,所以在自己原来的工程中 测试了一下各个api的具体效果.在这里跟大家分享一下. 这是我具体测试的代码 ...
- Openwrt:添加"自定义软件包.ipk"
我们已经尝试做的一件事情,是让移植软件到OpenWrt的操作变得非常容易.如果打开OpenWrt里的一个软件包的目录(OpenWrt/Package/* 或 OpenWrt/feeds/package ...
- InnoDB的ibd数据文件为什么比data_length+index_length+data_free的总和还要大?
问题描述: 同事在给jiradb做mysqldump时,发现dump出来的文件只有10MB左右,而ibd文件占用磁盘空间100MB左右. 最初,我们猜测可能是delete操作导致了大量的磁盘碎片,以及 ...
- Android广播时间——实现强制下线功能
目录 思路:强制下线功能需要先关闭掉所有的活动,然后回到登录界面. 步骤 1.关闭所有活动 2.创建BaseActivity类作为所有活动的父类,因为需要用ActivityCollector管理所有活 ...
- Java 将鼠标改为图片的两种方法
一 图片跟着鼠标移动,鼠标隐藏 int x,y; addMouseMotionListener(this);//设置鼠标监听 public void paint(Graphics g) { g.dr ...
- 【hdu1030】“坐标表示法”
http://acm.hdu.edu.cn/showproblem.php?pid=1030 算法:以顶点为原点,建立坐标系,一个数可以唯一对应一个三元组(x, y, z),从任意一个点出发走一步,刚 ...
- TP5整合的阿里云短信接口
现阶段,短信的应用主要就是用来验证下手机号是不是正常的手机号.只要涉及到用户手机号的问题的时候,都会做短信验证码来验证下改手机号是否是正常手机号.接下来就是操作步骤. 首先要在阿里云账号上开通短信功能 ...