zoukankan      html  css  js  c++  java
  • 31、Vue.set方法(视图更新)

    https://blog.csdn.net/qq_37041819/article/details/105644405

    这里我定义了一个列表数据,我将通过按钮来控制列表数据。
    在这里插入图片描述

    比如我们修改一个数组其中的一个值,或者添加一条数据时,不管用。

    <template>
      <div id="app" style="padding: 100px">
        <el-link type="primary" v-for="item in items" :key="item.id" style="margin-right: 10px">{{item.message}}</el-link>
        <el-button @click='btn2Click()'>动态赋值</el-button>
      </div>
    </template>
    <script>
      import Vue from 'vue'
        export default {
          name: "test",
          data() {
            return{
              items:[
                {message:"Test one",id:"1"},
                {message:"Test two",id:"2"},
                {message:"Test three",id:"3"}
              ]
            }
          },
          methods:{
            btn2Click(){
              this.items[0] = {message:"Test four",id:"10"}
              console.log(this.items)
            },
          },
        }
    </script>
    
    

    当我点击按钮通过JS赋值的方法,将Tset one改为 Test four时,发现控制台已经改变了,但是视图并没有更新
    在这里插入图片描述
    在这里插入图片描述
    因此修改失败

    Vue.set() 方法
    调用方法:Vue.set( target, key, value )
    target:要更改的数据源(可以是对象或者数组)
    key:要更改的具体数据
    value :重新赋的值

    <template>
      <div id="app" style="padding: 100px">
        <el-link type="primary" v-for="item in items" :key="item.id" style="margin-right: 10px">{{item.message}}</el-link>
        <el-button @click='btn2Click()'>动态赋值</el-button>
      </div>
    </template>
    <script>
      import Vue from 'vue'
        export default {
          name: "test",
          data() {
            return{
              items:[
                {message:"Test one",id:"1"},
                {message:"Test two",id:"2"},
                {message:"Test three",id:"3"}
              ]
            }
          },
          methods:{
            btn2Click(){
              Vue.set(this.items,0,{message:"Test four",id:"10"})
              console.log(this.items)
            },
          },
        }
    </script>
    
    

    还是点击按钮如下图
    在这里插入图片描述
    在这里插入图片描述
    这次控制台变化的同时,视图页面也跟着变化

    总结:
    在vue文档中写着如果在实例创建之后添加新的属性到实例上,它不会触发视图更新
    数据发生变化视图不更新 那就要Vue.set方法来设置

  • 相关阅读:
    最新Sublime Text 2 激活 汉化
    深入理解JPEG图像格式Jphide隐写
    入CTF坑必不可少的地方-保持更新
    v0lt CTF安全工具包
    浅析弱口令
    尽最大可能分析上传源码及漏洞利用方式
    最新Internet Download Manager (IDMan) 6.25 Build 20 32位 64位注册破解补丁
    c# double保留2位小数
    VS2010 & Visual Assist X 的配合
    C#的回调被C++调用
  • 原文地址:https://www.cnblogs.com/dream111/p/13519818.html
Copyright © 2011-2022 走看看