Vue中的this.$set

ゝ一纸荒年。 2021-07-26 01:47 417阅读 0赞

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

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

**调用方法: Vue.set( target , key , value)**

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

![20210510112229648.png][] ![20210510112241202.png][]

<template>
      <div id="app">
        <div v-for="item in items" :key="item.id">
          {
       { item.name }},{
       { item.id }}
        </div>
        <el-button @click="handClick()">更改数据</el-button>
      </div>
    </template>
    
    <script>
    export default {
      name: "App",
      data() {
        return {
          items: [
            { name: "张三", id: "1" },
            { name: "李四", id: "2" },
            { name: "王五", id: "3" },
          ],
        };
      },
      mounted() {
        this.items[0] = { name: "张三三", id: "11" }; //此时对象的值更改了，但是视图没有更新
      },
      methods: {
        handClick() {
          this.$set(this.items, 1, { name: "李四四", id: "22" });
          this.$set(this.items[2], "name", "王五五");
        },
      },
    };
    </script>

[20210510112229648.png]: https://img-blog.csdnimg.cn/20210510112229648.png
[20210510112241202.png]: /images/20210725/06efc7eacb29490a822a375baaab5e51.png

发表评论取消回复

表情：

评论列表（有 0 条评论，417人围观）

还没有评论，来说两句吧...

相关阅读

相关【Vue.js】015-Vue：Vue中的MVVM、Vue的options选项

目录三、Vue中的MVVM 1、MVVM概述 2、Vue中的MVVM 结构图示：实例图示：四、Vue的options选项 1、参考文档 2、先掌握三个

太过爱你忘了你带给我的痛/ 2023年10月05日 02:52/ 0 赞/ 57 阅读

相关【Vue】Vue中的Virtual DOM

目录 1. 什么是虚拟DOM? 2. 模板转化为视图的过程 3. 虚拟DOM的优势 4

旧城等待，/ 2023年03月06日 03:26/ 0 赞/ 27 阅读

相关 vue中的$nextTick

在下次DO更新循环结束之后执行延迟回调，在修改数据之后立即使用这个方法，获取更新后的DOM，vue在更新DOM时是异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行

女爷i/ 2023年01月19日 09:46/ 0 赞/ 211 阅读

相关 vue vue实例中的data与vue组件中的data()

vue组件就是vue实例,可以被复用. 而在复用时,希望组件中的`data`应该是相互隔离的. 如果使用 data : { count: 0

左手的ㄟ右手/ 2023年01月07日 10:18/ 0 赞/ 201 阅读

相关 Vue中的$nextTick()

一、NextTick是什么官方对其的定义 > 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM 什么意思呢？ >

深藏阁楼爱情的钟/ 2022年12月02日 13:39/ 0 赞/ 235 阅读

相关 vue中的$

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAbGl1bGFuZzY4_

迈不过友情╰/ 2022年09月10日 11:13/ 0 赞/ 352 阅读

相关 Vue中的$nextTick

this.$nextTick 将回调延迟到下次DOM更新循环之后执行。 <template> <div ref="ref_test" @click="t

￡神魔★判官ぃ/ 2022年09月07日 15:59/ 0 赞/ 227 阅读

相关 Vue中的vue-router

文章目录官网 vue-router的使用源码结果分析作用：在一个系统中往往会有很多的页面组成

左手的ㄟ右手/ 2022年04月22日 11:10/ 0 赞/ 240 阅读

相关 vue中的router

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hyYnNm

刺骨的言语ヽ痛彻心扉/ 2022年03月06日 01:00/ 0 赞/ 242 阅读

相关 Vue中的this

在vue内部的this变量到底是谁呢，我们在created的时候，打印this var vm = new Vue({ el:"app",

梦里梦外;/ 2022年02月19日 18:43/ 0 赞/ 327 阅读