返回顶部
首页 > 资讯 > 前端开发 > 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://lsjlt.com/news/130040.html(转载时请注明来源链接)

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

猜你喜欢
  • vue $set 实现给数组集合对象赋值
    vue $set 数组集合对象赋值 在vue自定义数组对象集合中,想要给每个数组对对象再添加一个属性和值。 // data定义一个集合对象 responseData:[ ...
    99+
    2024-04-02
  • 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+
    2024-04-02
  • vue如何给数组添加新对象并赋值
    目录给数组添加新对象并赋值方法一方法二数组赋值踩过的坑及解决给数组添加新对象并赋值 方法一 适用于数组就只有一组 listData: [{name:"张三",age:18}], //...
    99+
    2024-04-02
  • vue怎么给数组添加新对象并赋值
    这篇文章主要介绍了vue怎么给数组添加新对象并赋值的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue怎么给数组添加新对象并赋值文章都会有所收获,下面我们一起来看看吧。给数组添加新对象并赋值方法一适用于数组就只...
    99+
    2023-06-30
  • vue如何循环给对象赋值
    目录循环给对象赋值把已知数组循环赋值给另一数组循环给对象赋值 async submitForm() { var that = this that.allPe...
    99+
    2024-04-02
  • vue怎么循环给对象赋值
    这篇文章主要介绍“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 拦截器 参数
  • java中给实体对象属性的空值赋默认值
    目录给实体对象属性的空值赋默认值给实体类赋默认值通用方法给实体对象属性的空值赋默认值 private final String defaultStr = ""; private fi...
    99+
    2024-04-02
  • vue实现用v-bind给src和href赋值
    目录v-bind给src和href赋值示例v-bind:src无效问题附上代码v-bind给src和href赋值 用v-bind给src和href赋值其实很简单,即 v-bind:属...
    99+
    2024-04-02
  • vue实现动态给data函数中的属性赋值
    目录vue动态给data函数中的属性赋值vue给data中的数据赋值报错问题背景分析解决方案vue动态给data函数中的属性赋值 1.首先创建一个监视器,用来监视相关的属性 2.当这...
    99+
    2024-04-02
  • JavaScript对象和数组的解构赋值实例分析
    本文小编为大家详细介绍“JavaScript对象和数组的解构赋值实例分析”,内容详细,步骤清晰,细节处理妥当,希望这篇“JavaScript对象和数组的解构赋值实例分析”文章能帮助大家解决疑惑,下面跟着小编...
    99+
    2024-04-02
  • java对象数组赋值的方法有哪些
    在Java中,可以使用以下方法给对象数组赋值:1. 逐个赋值:可以使用简单的赋值语句,将每个元素逐个赋值给对象数组的对应位置。例如:...
    99+
    2023-08-15
    java
  • ES6解构赋值(数组,对象,函数)使用详解
    目录解构赋值数组解构默认值对象解构剩余模式(pattern)"…"嵌套解构智能函数参数总结解构赋值 JavaScript 中最常用的两种数据结构是 ...
    99+
    2022-11-16
    ES6解构赋值使用 ES6解构赋值 ES6数组解构赋值 ES6解构赋值对象
  • VB.NET如何实现数组赋值
    这篇文章主要介绍了VB.NET如何实现数组赋值,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在VB.NET数组赋值中增加了一个修饰Shared。Shared 关键字指示一个或...
    99+
    2023-06-17
  • vue给数组中对象排序sort函数的用法
    目录vue给数组中对象排序 sort函数vue小技巧:简单排序和对象排序对于数组里面全是number对于一个对象 有多种类型vue给数组中对象排序 sort函数 开发穿梭框的时候,需...
    99+
    2024-04-02
  • 解析ES6中的解构赋值(数组,对象,嵌套,默认值)
    解构赋值 通过解构赋值,可以快速从对象或者数组中取出属性或者数值。 1.解构赋值 可以通过定位到数组或者对象的某一个位置,将值直接赋给一个或多个变量。 const arr = ['d...
    99+
    2022-11-16
    ES6解构赋值 ES6解构赋值数组 es6对象的解构赋值
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作