文档章节

vue笔记 $set的正确用法

Carbenson
 Carbenson
发布于 2018/12/10 10:08
字数 307
阅读 11
收藏 0

vue2.0 给data对象新增属性,并触发视图更新

如下代码,给 student对象新增 age 属性

data () {
    return {
        student: {
            name: '',
            sex: ''
        }
    }
}

众所周知,直接给student赋值操作,虽然可以新增属性,但是不会触发视图更新

mounted () {
    this.student.age = 24
}

原因是:受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属性必须在 data 对象上才能让 Vue.js 转换它,才能让它是响应的。

要处理这种情况,我们可以使用$set()方法,既可以新增属性,又可以触发视图更新。

但是,值得注意的是,网上一些资料写的$set()用法存在一些问题,导致在新接触这个方法的时候会走一些弯路!

错误写法:this.$set(key,value)

mounted () {
    this.$set(this.student.age, 24)
}

正确写法:this.$set(this.data,”key”,value’)

mounted () {
    this.$set(this.student,"age", 24)
}
 

本文转载自:https://blog.csdn.net/panyang01/article/details/76665448

共有 人打赏支持
Carbenson
粉丝 16
博文 260
码字总数 81948
作品 0
广州
程序员
私信 提问
vue.js(vue-resource) ---jsonp跨域

之前的笔记说axios没有办法处理跨域问题,所以就引入了vue-resource。使用jsonp来解决跨域问题. vue-resource的基本用法: get(url, [options]) head(url, [options]) delete(url, [options])...

bluefrankey
01/07
0
0
Vue插件开发流程详解-从开发到发布至npm(二)

 前记:上一篇 https://www.cnblogs.com/adouwt/p/9211003.html,(这里感谢博客园的网友,给我点赞推荐了) 说到了一个完整的vue插件开发、发布的流程,总结下来就讲了这么一个事,如何注入...

大灰狼的小绵羊哥哥
2018/09/16
0
0
vue插件开发流程详解-从开发到发布至npm(二)

  前记:上一篇 https://www.cnblogs.com/adouwt/p/9211003.html,说到了一个完整的vue插件开发、发布的流程,总结下来就讲了这么一个事,如何注入vue, 如果封装vue插件,如何测试vue插件,...

阿逗
2018/09/16
0
0
说说我眼中的Vue和React

前序 我最早接触的是reactjs,时间是在2016年,当时主要从官网学习,并且写了一些笔记。坦白讲,当时学习了一段时间,只是对里面的概念有点印象而已。也搞不懂怎么去具体的使用在项目里面,里...

a独家记忆
2018/07/10
0
0
07、Vue.js---Vue对象的实例方法和属性

Vue对象的实例属性和方法分为全局和局部实例属性和方法。全局和局部的区别在于调用者不同。 · 局部实例属性和方法: vm | this .$方法名或属性; · 全局实例熟悉和方法: Vue .方法名或属性...

秋季长青
2018/07/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

uml类图

平时阅读一些远吗分析类文章或是设计应用架构时没少与UML类图打交道。实际上,UML类图中最常用到的元素五分钟就能掌握,下面赶紧来一起认识一下它吧: 一、类的属性的表示方式 在UML类图中,...

asdf08442a
8分钟前
0
0
Linux下执行脚本报错提示invalid option 3: set: -

1、在环境下执行sh报错invalid option 3: set: - 2、于是换成chmod 777 install.sh改执行权限,并且默认使用#!/bin/bash bash: ./install.sh: /bin/bash^M: bad interpreter: No such file ......

noob_chr
9分钟前
0
0
phpstrom2018激活与汉化

phpstrom2018激活与汉化 方法一. 直接用浏览器打开 http://idea.lanyus.com/ (推荐) 点击页面中的“获得注册码”,然后在注册时切换至Activation Code选项,输入获得的注册码一长串字符串,...

万建宁
10分钟前
0
0
Kali Linux NetHunter教程Kali NetHunter支持的设备和ROMs

Kali Linux NetHunter教程Kali NetHunter支持的设备和ROMs NetHunter是一个基于Kali Linux为Nexus设备构建的Android渗透测试平台,其中包括一些特殊和独特的功能。NetHunter支持无线802.11注...

大学霸
19分钟前
1
0
端口可用性探测

在服务器上打开了一个端口,我们需要测试是否开启成功是否可用,可以在本机使用 traceroute (linux)工具 traceroute 是几乎所有 Linux 发行版本预装的网络测试工具,用于跟踪 Internet 协议(...

applepaihs
19分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部