广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue $set 实现给数组集合对象赋值
  • 704
分享到

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

2024-04-02 19:04:59 704人浏览 八月长安
摘要

Vue $set 数组集合对象赋值 在vue自定义数组对象集合中,想要给每个数组对对象再添加一个属性和值。 // data定义一个集合对象 responseData:[

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方法,成功显示第三个属性。

在这里插入图片描述

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue $set 实现给数组集合对象赋值

本文链接: https://www.lsjlt.com/news/130040.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue $set 实现给数组集合对象赋值
    vue $set 数组集合对象赋值 在vue自定义数组对象集合中,想要给每个数组对对象再添加一个属性和值。 // data定义一个集合对象 responseData:[ ...
    99+
    2022-11-12
  • vue $set如何实现给数组集合对象赋值
    本篇内容主要讲解“vue $set如何实现给数组集合对象赋值”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue $set如何实现给数组集合对象赋值”吧!vue $set 数组集合对象赋值在vu...
    99+
    2023-06-20
  • vue中$set怎么给数组集合对象赋值
    这篇文章主要讲解了“vue中$set怎么给数组集合对象赋值”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue中$set怎么给数组集合对象赋值”吧!vue $set 数组集合对象赋值在vue...
    99+
    2023-07-04
  • 怎么用vue的$set实现给数组集合对象赋值
    这篇“怎么用vue的$set实现给数组集合对象赋值”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看...
    99+
    2022-10-19
  • vue如何给数组添加新对象并赋值
    目录给数组添加新对象并赋值方法一方法二数组赋值踩过的坑及解决给数组添加新对象并赋值 方法一 适用于数组就只有一组 listData: [{name:"张三",age:18}], //...
    99+
    2022-11-13
  • vue怎么给数组添加新对象并赋值
    这篇文章主要介绍了vue怎么给数组添加新对象并赋值的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue怎么给数组添加新对象并赋值文章都会有所收获,下面我们一起来看看吧。给数组添加新对象并赋值方法一适用于数组就只...
    99+
    2023-06-30
  • 微信小程序this.setData给对象&数组动态赋值
    固定属性赋值 wxml: {{formData.title}}  js: data:{ formData:{ title:'hellow' }} 这个时候页面上显示的是 hellow 当我们修改的时候有2种方案 ...
    99+
    2023-09-10
    微信小程序 小程序
  • java反射给对象属性赋值怎么实现
    Java反射可以通过`java.lang.reflect.Field`类来给对象的属性赋值。以下是一个示例代码: import ja...
    99+
    2023-10-27
    java
  • MyBatis拦截器:给参数对象属性赋值的实例
    该拦截器的作用:在进行增加、修改等操作时,给数据模型的一些通用操作属性(如:创建人、创建时间、修改人、修改时间等)自动赋值。该实现是在DAO层拦截,即存入DB前最后一层。后经分析,不是很合理,改为在service层拦截,用spring AO...
    99+
    2023-05-31
    mybatis 拦截器 参数
  • vue实现动态给data函数中的属性赋值
    目录vue动态给data函数中的属性赋值vue给data中的数据赋值报错问题背景分析解决方案vue动态给data函数中的属性赋值 1.首先创建一个监视器,用来监视相关的属性 2.当这...
    99+
    2022-11-13
  • JavaScript对象和数组的解构赋值实例分析
    本文小编为大家详细介绍“JavaScript对象和数组的解构赋值实例分析”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript对象和数组的解构赋值实例分析”文章能帮助大家解决疑惑,下面跟着小编...
    99+
    2022-10-19
  • vue如何实现跨页面传递与接收数组并赋值
    目录跨页面传递与接收数组并赋值1.界面A:question-edit2.界面B:add-question数组赋值踩过的坑跨页面传递与接收数组并赋值 为更好让大家理解拿自己的项目做例...
    99+
    2022-11-13
  • vue怎么实现跨页面传递与接收数组并赋值
    今天小编给大家分享一下vue怎么实现跨页面传递与接收数组并赋值的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。跨页面传递与接收...
    99+
    2023-06-30
  • js深度合并两个数组对象的实现
    目录js深度合并两个数组对象关于数组对象的深浅合并js深度合并两个数组对象 js合并两个数组对象, 如果a中含有b,则b的值覆盖a的值 如果a中不含有b 则b的值新增到a Merge...
    99+
    2022-12-03
    js深度合并数组对象 js合并数组对象 合并数组对象
  • json如何解析混合数组对象到实体类的list集合里去
    一、前言 这次项目中遇到了一个这样的需求,把下面数据解析到我下面的对象里去。 json 文件 [ { "categories": [ ...
    99+
    2022-11-12
  • 如何实现Visual Basic 10中的集合与数组初始值设定
    这篇文章给大家介绍如何实现Visual Basic 10中的集合与数组初始值设定,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。伴随.NET 4.0和Visual Studio 2010的发布,Visual Basic ...
    99+
    2023-06-17
  • springboot读取yml文件中的list列表、数组、map集合和对象方法实例
    目录前言application.yml定义list集合application.yml定义数组类型总结前言 springboot配置文件yml类型简单的风格,十分受大家的欢迎,支持字符...
    99+
    2023-02-24
    springboot读取yml文件内容 springboot获取yml的值 springboot读取yml
  • Vue组件模板形式如何实现对象数组数据循环为树形结构
    这篇文章主要介绍Vue组件模板形式如何实现对象数组数据循环为树形结构,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!数据结构为数组中包含对象--树形结构,用Vue组件的写法实现以下的效...
    99+
    2022-10-19
  • Python 对象和 Apache:如何将它们组合使用以实现更好的数据可视化?
    数据可视化是数据科学的重要组成部分。在大数据时代,数据可视化变得越来越重要,因为它可以帮助人们更好地理解和分析数据。Python 和 Apache 是两个非常流行的工具,它们都可以用于数据可视化。本文将介绍如何将 Python 对象和 A...
    99+
    2023-07-06
    对象 apache numy
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作