vue $set 实现给数组集合对象赋值

vue $set 数组集合对象赋值

在vue自定义数组对象集合中，想要给每个数组对对象再添加一个属性和值。

// data定义一个集合对象
responseData:[
      {'id':'1','name':'女装','price':115,'num':1,'pic':'../static/img/1.jpg'},
      {'id':'2','name':'男装','price':110,'num':1,'pic':'../static/img/2.jpg'},
      {'id':'3','name':'童装','price':118,'num':2,'pic':'../static/img/3.jpg'}
],
// vue方法请求返回集合对象数据
if(res.data.code === 'ok'){
 that.totals = res.data.data.total;
 that.questionList = res.data.data.list;

}
// 赋值操作
for(let val of that.questionList){
//此处为重点
hat.$set(val,'discussAnswer','0');
}

Vue this.$set的用法

解决数组、对象修改后不更新问题

一、this.$set实现什么功能，为什么要用它？

当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了，简单来说this.$set的功能就是解决这个问题的啦。

官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = ‘hi').

二、怎么用它？

举个例子：

1.Vue写在template中的代码：

<div v-for="(item,index) in list" :key="index"
>{{item.name}}
</div>
<button @click="changeValue" type="primary">改变值</button>
</div>

2.export default{}中data数据

data(){
    return {
      list:[
        {name:'29Kun',id:1},
        {name:'299Kun',id:2},
      ]
    }
  }

3.点击按钮触发changeValue方法

mounted(){
  this.list[2] = {name:'2999Kun',id:3}
  console.log(this.list[0]);
},
methods: {
  changeValue(){
    this.$set(this.list,2,{name:'2999kun',id:3})
  }
}

调用方法：this.$set( target, key, value )

target：要更改的数据源(可以是对象或者数组)

key：要更改的具体数据

value ：重新赋的值

4.在没有点击按钮的时候，界面是这样的，虽然界面没有显示出来，但是控制台已经打印出来了

5.当点击按钮的时候，调用this.$set方法，成功显示第三个属性。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue.set()和this.$set()使用和区别

    Vue.set()和this.$set()使用和区别

    在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新. 如下代码,给 student对象新增 age 属性 data () { return { student: { name: '', sex: '' } } } mounted () { // --钩子函数,实例挂载之后 this.student.age = 24

  • Vue2.0 $set()的正确使用详解

    vue2.0 给data对象新增属性,并触发视图更新 如下代码,给 student对象新增 age 属性 data () { return { student: { name: '', sex: '' } } } 众所周知,直接给student赋值操作,虽然可以新增属性,但是不会触发视图更新 mounted () { this.student.age = 24 } 原因是:受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除.因为 Vue.js 在初始化实例时将属性转为 getter

  • vue $set 给数据赋值的实例

    如果在实例创建之后添加新的属性到实例上,它不会触发视图更新. 业务介绍:模拟后台数据向DOM树上遍历数据,再向数据里添加状态属性,根据状态改变显示图片,默认nochecked.png,点击时改变状态.显示checked.png DOM树 <div class="cartContent" :class="{'bg' : status == 2}" v-for="(val,key) in imgListData" :id="key&q

  • Vue.$set 失效的坑 问题发现及解决方案

    Vue.$set 失效的坑 问题发现及解决方案

    偶然在项目中发现Vue.$set失效 有这样一个需求 添加数据过滤用 左边是控件选择 中间是条件 右边是值 因为会根据控件不同渲染不同的值选项控件 <el-form inline > <el-form-item style="margin-bottom: 20px;"> <el-select v-model="data[props.prop]" @change="data[props.value] = ''">

  • vue中 this.$set的用法详解

    当vue的data里边声明或者已经赋值过的对象或者数组(数组里边的值是对象)时,向对象中添加新的属性,如果更新此属性的值,是不会更新视图的. <template> <div id="app"> <p v-for="item in items" :key="item.id">{{item.message}}</p> <button class="btn" @click=&qu

  • vue 中this.$set 动态绑定数据的案例讲解

    感觉网上对this.$set的讲解乱糟糟的,我来总结一下对它单个数据.对象.数组.json数据的绑定. 话不多说直接上代码: <template> <div> <!-- 单个数据 --> <button @click="text0a">text0</button> <p>text0: {{text0}}</p> <!-- 对象 --> <button @click="text

  • vue $set 实现给数组集合对象赋值

    vue $set 实现给数组集合对象赋值

    vue $set 数组集合对象赋值 在vue自定义数组对象集合中,想要给每个数组对对象再添加一个属性和值. // data定义一个集合对象 responseData:[ {'id':'1','name':'女装','price':115,'num':1,'pic':'../static/img/1.jpg'}, {'id':'2','name':'男装','price':110,'num':1,'pic':'../static/img/2.jpg'}, {'id':'3','name':'童装'

  • 浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号

    1 C,C++,Java,PHP都能容忍末尾的逗号 C,C++,Java中对数组赋值时,最后一个元素末尾的逗号可有可无.下面两行代码对这些语言来说是等效的. int a[] = {1,2,3}; /* 正确 */ int a[] = {1,2,3,}; /* 正确 */ PHP这一点也继承了C的特点,下面的两行代码等效. $a = array(1,2,3); /* 正确 */ $a = array(1,2,3,); /* 正确 */ 2 JavaScript视末尾逗号为语法错误! 然而到了Jav

  • 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

  • JavaScript数组对象赋值用法实例

    JavaScript数组对象赋值用法实例

    本文实例讲述了JavaScript数组对象赋值用法.分享给大家供大家参考.具体如下: 这里JavaScript数组对象的使用会使你的JS程序变得简洁而有效率,但是好像不少新手都不喜欢用数组,因为觉得它们抽象,不好理解,其实只要你认真领悟,它就像捅破窗户纸一样,令你豁然开朗.希望通过本实例,你对数组会有更多的理解. 运行效果图如下: 具体代码如下: <html> <head> <meta http-equiv="content-type" content=&

  • ES6数组与对象的解构赋值详解

    本文实例讲述了ES6数组与对象的解构赋值.分享给大家供大家参考,具体如下: 数组的解构赋值 基本用法 ES6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称之为解构(Destructuring) // 以前为变量赋值,只能直接指定值 var a = 1; var b = 2; var c = 3; // ES6允许写成这样 var [a,b,c] = [1,2,3]; 本质上,这种写法属于"模式匹配",只要等号两边的模式相同,左边的变量就会被赋予对应的值. 下面是一些使

  • JS赋值、浅拷贝和深拷贝（数组和对象的深浅拷贝）实例详解

    本文实例讲述了JS赋值.浅拷贝和深拷贝(数组和对象的深浅拷贝).分享给大家供大家参考,具体如下: 深拷贝和浅拷贝是只针对Object和Array这样的引用数据类型的.  浅拷贝 只是拷贝了基本类型的数据,而引用类型数据,复制后也是会发生引用,我们把这种拷贝叫做浅拷贝(浅复制) 浅拷贝只复制指向某个对象的指针,而不复制对象本身,新旧对象还是共享同一块内存.但深拷贝会另外创造一个一模一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象. 赋值和浅拷贝的区别 当我们把一个对象赋值给一个新的变

  • 如何将JSON字符串数组转对象集合

    目录 JSON字符串数组转对象集合 json字符串/数组与Java对象/集合互转 1.将java对象转换为json字符串 2.json字符串与Java对象的转换 JSON字符串数组转对象集合 String json ="json数组数据"; JSONArray res = JSON.getJSONArray(json); //用json的方法toJavaList,参数放入想转的集合对象就可以了 List<MonthTaskRes> monthTaskRes = res.to

  • JavaScript每天必学之数组和对象部分

    JavaScript每天必学之数组和对象部分

    对象部分 Object类型  Object 是一个无序的集合,可以存放任意类型对象,所有其他对象都继承自这个对象. 创建Object类型有两种,一种是使用new运算符,一种是字面量表示法. 1.使用new运算符创建Object  var obj = new Object();//注意大写,也可以直接写成Object() 注意,通过new Object() 的写法生成新对象,与字面量的写法 obj = {} 是等价的. 2. 使用字面量方式创建: var obj = { name : 'trigk

  • js中通过getElementsByName访问name集合对象的方法

    1.查找给定name属性的所有元素,这个方法将返回一个节点集合,也可以称为对象集合. 2.这个集合可以作为数组来对待,length属性的值表示集合的个数. 3.因为在html页面中,name不能唯一确定一个元素,所以方法的名称为getElementsByName而不是getElementByName <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x

  • javascript学习笔记（二）数组和对象部分

    javascript学习笔记（二）数组和对象部分

    javascript对象部分 一:基础部分 1.JavaScript 中所有变量都是对象,除了两个例外 null 和 undefined. 2.Jscript 支持四种类型的对象:内部对象.生成的对象.宿主给出的对象(所有BOM和DOM对象都是宿主对象.)以及 ActiveX 对象(外部组件). 3.Microsoft Jscript 提供了 11 个内部(或"内置")对象.它们是Array.Boolean.Date.Function.Global.Math.Number.Object

随机推荐