zoukankan      html  css  js  c++  java
  • vue 解决视图未更新数据的几种方式

    比如给data中的对象添加属性时候,在控制台发现该对象身上已经有了属性,但是视图层并没有更新数据。

    原因是因为受JS限制,vue不能监听对象属性的添加/删除等操作,在vue组件初始化的过程中,会调用getter和setter方法,所以该属性必须是存在data中,视图层才会响应该数据的变化。(也就是说vue实例已经创建了,数据也都挂载在上面了,这个时候在给一个对象增加新的属性是不可以的)

    解决方式大概有两种:

    1、使用vue.$set

    this.$set(obj, key, value)/vue.set(obj, key, value)

    返回值为设置的值

    <script>
    export default {
     data() {
       return {
         place: {
           name: '南锣鼓巷',
         }
       }
     },
     methods: {
       setMessage() {
         this.$set(this.place, 'age', 10)
         console.log(this.place)
       }
     }
    }
    </script>

    2、使用Object.assign(target, sources)方法

    <script>
    export default {
      data() {
        return {
          place: {
            name: '南锣鼓巷',
          }
        }
      },
      methods: {
        setMessage() {
          this.place.age = 15
          this.place = Object.assign({}, this.place)
          console.log(this.place)
        }
      }
    }
    </script>
  • 相关阅读:
    清除cookie
    判断是否为中文
    正则表达式
    smarty基础语法
    smarty模板
    ajax
    php工作笔记1
    PHP中超全局变量$GLOBALS和global的区别
    SQL连表查询
    linux上安装git(客户端)及GitHub的配置
  • 原文地址:https://www.cnblogs.com/theblogs/p/12127933.html
Copyright © 2011-2022 走看看