vue 数组和对象不能直接赋值情况和解决方法(推荐)

Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如：vm.items.length = newLength

当第一种情况需求时，可以使用this.$set(this.arr,index,newVal)

Vue 不能检测对象属性的添加或删除：

　　可以使用this.$set(this.person,'age',12)

当需要添加多个对象时，Object.assign({},this.person,{age:12,name:'wee'})

PS：Vue实现对数组、对象的深拷贝、复制

当组件间传递对象时，由于此对象的引用类型指向的都是一个地址（除了基本类型跟null,对象之间的赋值，只是将地址指向同一个，而不是真正意义上的拷贝），如下

数组：

var a = [1,2,3];
var b = a;
b.push(4); // b中添加了一个4
alert(a); // a变成了[1,2,3,4]

对象：

var obj = {a:10};
var obj2 = obj;
obj2.a = 20; // obj2.a改变了，
alert(obj.a); // 20，obj的a跟着改变

这就是由于对象类型直接赋值，只是将引用指向同一个地址，导致修改了obj会导致obj2也被修改

所以在vue中，如果多个组件引用了同一个对象作为数据，那么当其中一个组件改动对象数据时，其他对象的数据也会同步改动。有这种双向绑定的需要的话，那么自然是最好的，但如果不需要这种绑定而希望各组件的对象数据之间相互独立，即是互不关联的对象副本的话，可以用下面的方法解决

computed: {
   data: function () {
     var obj={};
     obj=JSON.parse(JSON.stringify(this.templateData)); //this.templateData是父组件传递的对象
     return obj
  }
 }

总结

以上所述是小编给大家介绍的vue 数组和对象不能直接赋值情况和解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Vue利用路由钩子token过期后跳转到登录页的实例

    在Vue2.0中的路由钩子主要是用来拦截导航,让它完成跳转或前取消,可以理解为路由守卫. 分为全局导航钩子,单个路由独享的钩子,组件内钩子. 三种 类型的钩子只是用的地方不一样,都接受一个函数作为参数,函数传入三个参数,分别为to,from,next. 其中next有三个方法 (1)next(); //默认路由 (2)next(false); //阻止路由跳转 (3)next({path:'/'}); //阻止默认路由,跳转到指定路径 这里我使用了组件内钩子进行判断token过期后跳转到登录页,

  • vue路由跳转时判断用户是否登录功能的实现

    通过判断该用户是否登录过,如果没有登录则跳转到login登录路由,如果登录则正常跳转. 一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录(建议用vuex): 简单用vuex表示一下,不会可以自己去官网多看看: import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); var state = { isLogin:0, //初始时候给一个 isLogin=0 表示用户未登录 }; const mutations = { cha

  • vue动态生成dom并且自动绑定事件

    用jquery的时候你会发现,页面渲染后动态生成的dom,在生成之前的代码是没办法取到相应对象的,必须重新获取.但是vue基于数据绑定的特性让它能生成的时候直接绑定数据. html: <div id="app"> <table v-for="table in tables"> <tr v-for="row in table.row"> <td style="width:80px;float:le

  • vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解

    vue中v-model动态生成的实例详解 前言: 最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的.那么问题来了,我们要怎样动态生成v-model? 现在项目做完了就整理了一下,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <

  • Vue-router路由判断页面未登录跳转到登录页面的实例

    如下所示: router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (token) { // 判断当前的token是否存在 next(); } else { next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path作为参数,登录成功后跳转到该

  • 使用Bootstrap和Vue实现用户信息的编辑删除功能

    使用Bootstrap和Vue实现用户信息的编辑删除功能

    使用Bootstrap实现简单的布局,并结合Vue进行用户信息的编辑删除等功能,代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用户信息编辑</title> <link rel="stylesheet" type="text/css" href="bootstrap.min.cs

  • vue 数组和对象不能直接赋值情况和解决方法(推荐)

    Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 当你修改数组的长度时,例如:vm.items.length = newLength 当第一种情况需求时,可以使用this.$set(this.arr,index,newVal) Vue 不能检测对象属性的添加或删除: 可以使用this.$set(this.person,'age',12) 当需要添加多个对象时,Object.assign({},this.pers

  • 解决vue数组中对象属性变化页面不渲染问题

    做checkbox多选功能的时候遇到了一个坑,逻辑怎么看都对,但是就是有bug,最后发现数组那里值变了页面勾选没有重新渲染. 换了关键词搜索找到了相关方法. 其实之前读文档教程的时候看到过这里,但是只有真的使用之后才会有最直接的感触. 数组更新检测 变异方法 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 你打开控制台,然后用前面例子的 items 数

  • Vue 数组和对象更新,但是页面没有刷新的解决方式

    在使用数组的时候,数组内部数据发生改变,但是与数组绑定的页面的数据却没有发生变化. <ul> <li v-for="(item,index) in todos" :key="index">{{item.name}}</li> </ul> data () { return { msg: 'Welcome to Your Vue.js App', todos: [{ name: 'aa', age: 14 }, { nam

  • C++中临时对象的常见产生情况及其解决的方案

    C++中临时对象的常见产生情况及其解决的方案

    目录 前言 1. 以值传递的方式给函数传参 验证临时对象的而外开销(1) 解决方案 2. 类型转换成临时对象 / 隐式类型转换保证函数调用成功 验证临时对象的而外开销(2) 解决方案 3. 函数返回对象时候 验证临时对象的而外开销(3) 解决方案 前言 在C++中很容易就写出一些代码,这些代码的特点就是偷偷的给你产生了一些临时对象,导致临时对象会调用拷贝构造函数,赋值运算符,析构函数,假如该对象还有继承的话,也会调用父类的拷贝构造函数,赋值运算赋函数等.这些临时对象所调用的函数,都是不必要的开销

  • PHP数组与对象之间使用递归实现转换的方法

    本文实例讲述了PHP数组与对象之间使用递归实现转换的方法.分享给大家供大家参考.具体实现方法如下: 这里涉及一些简单的对象与数组的相互转换的问题,采用递归写了两个方法如下: function arrayToObject($e){ if( gettype($e)!='array' ) return; foreach($e as $k=>$v){ if( gettype($v)=='array' || getType($v)=='object' ) $e[$k]=(object)arrayToObj

  • JS判断是否为JSON对象及是否存在某字段的方法(推荐)

    实例如下: $.ajax({ type: 'POST', url: url, success(function(data){ //判断是否为JSON对象 if(typeof(data) == "object" && Object.prototype.toString.call(data).toLowerCase() == "[object object]" && !data.length){ alert("is JSON 0

  • php倒计时出现-0情况的解决方法

    本文实例讲述了php倒计时出现-0情况的解决方法.分享给大家供大家参考,具体如下: 问题:今天有反馈,说倒计时出现了-0天的情况,我看了看程序,卧槽,当时怎么没测试到 原因是PHP的逻辑判断中 -0 > 0 分析:贴出错的代码 $starttime = 1362585600; //3.7凌晨 $nowtime = 1362618921;//3.7早上 $off = ceil(($starttime - $nowtime)/86400); //倒计时 if ($off < 0) { $off =

  • 详谈表单重复提交的三种情况及解决方法

    详谈表单重复提交的三种情况及解决方法

    第一种情况:提交完表单以后,不做其他操作,直接刷新页面,表单会提交多次. - 在servlet中写一句输出,用来判断是否提交多次 System.out.println("已经插入"); request.getRequestDispatcher("/login_success.jsp").forward(request, response); - 这样的话,刷新多少次,就会在控制器显示多少个"已经插入". - 根本原因:Servlet处理完请求以后

  • vue webpack build资源相对路径的问题及解决方法

    默认情况webpack+vue-cli打包的css.js等静态资源路径都是绝对的,即static在根目录下,如果部署到带有文件夹目录的项目中,资源路径就会出错. 如图: 解决方法: 在webpack.prod.conf.js中,output中添加或者修改为 publicPath: './': output: { publicPath: './', path: config.build.assetsRoot, filename: utils.assetsPath('js/[name].[chunk

  • vue+element-ui中form输入框无法输入问题的解决方法

    目录 一.问题发现: 二.正确案例与错误原理: 三.问题解决 总结 一.问题发现: 笔者在制作登录页面前端时使用elementui+vue技术,发现输入框无法输入任何内容. 在csdn上查阅很多文章后发现都无法解决,于是去elementui官网进行反复查看才发现问题所在.最终发现问题是input标签中v-model写的不恰当导致无法生效/忘记书写v-model.如果有相同问题的可以看看本文有可能能帮助解决您的问题,下列解决过程以供参考. 二.正确案例与错误原理: 查看官网对于表单Form一栏的使

随机推荐