「后端小伙伴来学前端了」 Vue中 this.$set的用法 | 可用于修改对象中数组的某一个对象、 可用于更新数据到视图

简介: 「后端小伙伴来学前端了」 Vue中 this.$set的用法 | 可用于修改对象中数组的某一个对象、 可用于更新数据到视图

QQ截图20220525205327.png


夜晚有明月,梦里有佳人


前言


最近在写老师布置的vue项目,真的说实话,每天真就是在百度、google、bing等各个搜索引擎之间反复横跳,不然就是掘金搜一搜、思否搜一搜,还有CSDN看一看。我的前端是吃百家饭长大的,每天不知道要遇到多少问题,然后基本上周围所有的前端同学都被我问到了,基本上就是谁有空就拉谁来教我。


前端太多细节问题了,一旦遇到没有接触过问题,就会非常麻烦,如果有学习前端的后端小伙伴,我觉得最快熟悉前端的方式,就是整个项目写。这可能是最快上手前端框架的方式了吧。


一、vue中修改数组对象下的数组里的某一个对象


我的对象结构如下:


sections: [
    {
        id: 0,
        addInputBool: true,
        generallnformationBool: false,
        generallnformation: '',
        updateGenerlInfoImgBool: false,
        pullUpQusetionBool: true,
        upQusetionBool: true,
        downQuestionBool: false,
        questions: [
           {
                id:'',
                name:'',
              isCheckbox:'',
              answer:'',
              conditions:[],
            dropdownMultiSelections:[]
           }
       ]
    }
]


要实现的需求是通过数组下标,修改数组里某一个对象。


最开始我的想法就是将数值一个一个的赋值进数组,和写Java代码一样的思维。


this.sections[index].question[id]=this.addQuestion


这里的index和id是我们点击页面修改传过来的值,最后发现这样一直报错,不能够实现修改。


后来查百度说:


问题


根据数组的索引直接赋值没法修改数组的中对象。


原因


Vue 不允许在已经创建的实例上动态添加新的根级响应式属性 (root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上


然后就查到了要使用this.$set来进行操作


解决:


// 数组:第一个参数是要修改的数组, 第二个值是修改的下标或字段,第三个是要修改成什么值
this.$set(sections[index].question,id,{
    id:'123',
    name:'宁在春',
    isCheckbox:true,
    answer:'测试集',
    conditions:[1,2,3],
    dropdownMultiSelections:[a,b,c]
});
或者
// 对象:第一个参数是要修改的对象, 第二个值是修改属性字段,第三个是要修改成什么值
Vue.set(sections[index].question,id,{     id:'123',
                                     name:'宁在春',
                                     isCheckbox:true,
                                     answer:'测试集',
                                     conditions:[1,2,3],
                                     dropdownMultiSelections:[a,b,c]})


看到有这个this.$set方法,就想去了解了解,看看它还有什么应用场景,方便下次有需要的时候,能够直接用上。


二、this.$set


2.1、this.$set能够实现什么功能


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


简单说即是:当你发现你给对象加了一个属性,在控制台能打印出来,但是却没有更新到视图上时,也许这个时候就需要用到this.$set()这个方法了


2.2、如何使用 this.$set


Vue中this.$set的用法
// 数组:第一个参数是要修改的数组, 第二个值是修改的下标或字段,第三个是要修改成什么值
// 对象:第一个参数是要修改的对象, 第二个值是修改属性字段,第三个是要修改成什么值
Vue.set( target, propertyName/index, value )
参数
{Object | Array} target
{string | number} propertyName/index
{any} value


小小案例


<template>
  <div class="page" id="app">
    <button @click="add">设置</button>
    <ol>
      <li v-for="(item, index) in arr" :key="index">{{ item.name }}</li>
    </ol>
  </div>
</template>
<script>
export default {
  data () {
    return {
      arr: [
        { name: '宁在春', age: 21 },
        { name: '北桑夏', age: 21 }
      ]
    }
  },
  mounted () {
    this.arr[2] = { name: '青冬栗', age: 23 } // 数组的值发生了变化 但视图没有更改
    console.log(this.arr)
  },
  methods: {
    add () {
      this.$set(this.arr, 2, { name: '青冬栗', age: 23 }) // $set 触发视图更改
    }
  }
}
</script>


target: 要更改的数据源(可以是一个对象或者数组)
key 要更改的具体数据 (索引)
value 重新赋的值


在vue的生命周期钩子函数mounted中,我们手动的在数组加入了一个值,但是并不会直接在页面视图进行更新。


初始化的页面是这样的。


QQ截图20220525205521.png


但是在控制台其实是已经打印出来的拉


微信截图_20220525205538.png


但是如果我们点击按钮的设置,视图就会立马发生改变


QQ截图20220525205558.png


这就是this.$set一个妙用之处。


2.3、this.$set 应用场景


1、在我们使用vue进行开发中,可能会碰到一种情况,当已经生成vue实例后,再次去给数据赋值或者添加数据,并不能同步更新到数据上面去。


2、另外就是像我这种,利用this.$set进行数据的更新


自言自语


纸上得来终觉浅,绝知此事要躬行。

大家好,我是博主宁在春主页

一名喜欢文艺却踏上编程这条道路的小青年。

希望:我们,待别日相见时,都已有所成

目录
相关文章
|
11月前
|
存储 监控 安全
前端框架的数据驱动方式如何保证数据的安全性?
总之,前端框架的数据驱动方式需要综合运用多种手段来保证数据的安全性。从传输、存储、访问控制到防范攻击等各个方面进行全面考虑和实施,以确保用户数据的安全可靠。同时,不断加强安全管理和技术创新,以应对不断变化的安全挑战。
365 60
|
7月前
|
前端开发 Cloud Native Java
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
Java||Springboot读取本地目录的文件和文件结构,读取服务器文档目录数据供前端渲染的API实现
|
8月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
480 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
7月前
|
JavaScript 前端开发 API
你真的会使用Vue3的onMounted钩子函数吗?Vue3中onMounted的用法详解
onMounted作为vue3中最常用的钩子函数之一,能够灵活、随心应手的使用是每个Vue开发者的必修课,同时根据其不同写法的特性,来选择最合适最有利于维护的写法。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
|
JavaScript 前端开发 搜索推荐
Vue的数据驱动视图与其他前端框架的数据驱动方式有何不同?
总的来说,Vue 的数据驱动视图在诸多方面展现出独特的优势,其与其他前端框架的数据驱动方式的不同之处主要体现在绑定方式、性能表现、触发机制、组件化结合、灵活性、语法表达以及与后端数据交互等方面。这些差异使得 Vue 在前端开发领域具有独特的地位和价值。
224 58
|
7月前
|
JavaScript 前端开发 API
管理数据必备;侦听器watch用法详解,vue2与vue3中watch的变化与差异
一篇文章同时搞定Vue2和Vue3的侦听器,是不是很棒?不要忘了Vue3中多了一个可选项watchEffect噢。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
11月前
|
JavaScript API 开发工具
<大厂实战场景> ~ Flutter&鸿蒙next 解析后端返回的 HTML 数据详解
本文介绍了如何在 Flutter 中解析后端返回的 HTML 数据。首先解释了 HTML 解析的概念,然后详细介绍了使用 `http` 和 `html` 库的步骤,包括添加依赖、获取 HTML 数据、解析 HTML 内容和在 Flutter UI 中显示解析结果。通过具体的代码示例,展示了如何从 URL 获取 HTML 并提取特定信息,如链接列表。希望本文能帮助你在 Flutter 应用中更好地处理 HTML 数据。
327 1
|
12月前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
170 2
|
12月前
|
JSON 分布式计算 前端开发
前端的全栈之路Meteor篇(七):轻量的NoSql分布式数据协议同步协议DDP深度剖析
本文深入探讨了DDP(Distributed Data Protocol)协议,这是一种在Meteor框架中广泛使用的发布/订阅协议,支持实时数据同步。文章详细介绍了DDP的主要特点、消息类型、协议流程及其在Meteor中的应用,包括实时数据同步、用户界面响应、分布式计算、多客户端协作和离线支持等。通过学习DDP,开发者可以构建响应迅速、适应性强的现代Web应用。
586 2
|
11月前
|
JSON Dart 数据格式
<大厂实战场景> ~ flutter&鸿蒙next处理后端返回来的数据的转义问题
在 Flutter 应用开发中,处理后端返回的数据是常见任务,尤其涉及转义字符时。本文详细探讨了如何使用 Dart 的 `dart:convert` 库解析包含转义字符的 JSON 数据,并提供了示例代码和常见问题的解决方案,帮助开发者有效处理数据转义问题。
396 0