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

 更新时间:2021年07月08日 09:55:08   作者:CoderYin  
这篇文章主要介绍了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方法,成功显示第三个属性。

在这里插入图片描述

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 高频率Vue面试题汇总以及答案

    高频率Vue面试题汇总以及答案

    vue是组件化开发框架,所以对于vue应用来说组件间的数据通信非常重要,下面这篇文章主要给大家介绍了关于高频率Vue面试题以及答案的相关资料,需要的朋友可以参考下
    2023-02-02
  • Vue实现红包雨小游戏的示例代码

    Vue实现红包雨小游戏的示例代码

    红包也叫压岁钱,是过农历春节时长辈给小孩儿用红纸包裹的礼金。本文将通过Vue制作一个红包雨小游戏,文中的示例代码讲解详细,需要的可以参考一下
    2022-01-01
  • vue子页面控制父页面刷新问题

    vue子页面控制父页面刷新问题

    这篇文章主要介绍了vue子页面控制父页面刷新问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • vue中后端做Excel导出功能返回数据流前端的处理操作

    vue中后端做Excel导出功能返回数据流前端的处理操作

    这篇文章主要介绍了vue中后端做Excel导出功能返回数据流前端的处理操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • vue watch监听对象及对应值的变化详解

    vue watch监听对象及对应值的变化详解

    下面小编就为大家分享一篇vue watch监听对象及对应值的变化详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 在vue中实现低代码组件参数配置的流程步骤

    在vue中实现低代码组件参数配置的流程步骤

    这篇文章主要介绍了在vue中实现低代码组件参数配置的流程步骤,文中的代码示例讲解的非常详细,对我们的学习或工作有一定的参考价值,需要的朋友可以参考下
    2023-07-07
  • vue自定义组件实现双向绑定

    vue自定义组件实现双向绑定

    这篇文章主要为大家详细介绍了vue自定义组件实现双向绑定,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • vue+elementUI实现内嵌table的方法示例

    vue+elementUI实现内嵌table的方法示例

    本文主要介绍了vue+elementUI实现内嵌table的方法示例,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-12-12
  • vue的指令和插值问题汇总

    vue的指令和插值问题汇总

    Vue 是一套用于构建用户界面的渐进式框架,Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合,这篇文章主要介绍了vue的指令和插值总结,需要的朋友可以参考下
    2022-10-10
  • 56个实用的JavaScript 工具函数助你提升开发效率

    56个实用的JavaScript 工具函数助你提升开发效率

    今天来看看JavaScript中的一些实用的工具函数,希望能帮助你提高开发效率!需要的朋友可以参考下面文章的具体内容
    2021-10-10

最新评论