this.$set()
Posted 1024!
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了this.$set()相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
姓名：{{ name }}<br>
年龄：{{age}}<br>
说明：{{info.content}}
</div>
<script>
new Vue({
el: \'#app\',
data: {
name: "简书",
age: \'3\',
info: {
//content: \'my name is test\'
}
},
mounted: function(){
this.$set(this.info,"content", \'11111\')
}
})
</script>
</body>
</html>
this.$set用法
this.$set()的主要功能是解决改变数据时未驱动视图的改变的问题，也就是实际数据被改变了，但我们看到的页面并没有变化，这里主要讲this.$set()的用法，如果你遇到类似问题可以尝试下，vue官网写的是Vue.set，和this.$set()是一样的，但要注意当前this的指向问题，你要记住时this.$set()时当前this的指向一定要是最外层。
vue和uniapp语法大部分都是相同的，uniapp是针对移动端的，并且可以开发小程序，最重要的区别是uniapp开发小程序时不能操作dom，注意，是不能，不是不建议，操作DOM后编译代码时会报错。
先写下数据
items: [
{ message: "one", id: "1" },
{ message: "two", id: "2" },
{ message: "three", id: "3" }
]
通常我们改变某个message会这么写
this.items[0].message=\'one1\'; //这么写一般是可以更新视图的 我只是给举this.$set()用法的例子
使用this.$set()时
this.$set(this.items[0],\'message\',\'one1\');//改成数字类型就不用了加引号
有的时候我们可能一次改多个
this.items[0]={ message: "one3", id: "13" };
使用this.$set()时, 格式this.$set( target, key, value )
this.$set( this.items, 0, { message: "one3", id: "13" })
给大家复现一种不渲染的例子：当前我们数组内有三条对象，那么我想加一条，并且我就不用类似push的东西，还要能渲染到视图
普通写法 不渲染
this.items[3]={ message: "four", id: "4" };//数据已经被改变 但是视图层没渲染，我们看不到
使用this.$set()时, 格式this.$set( target, key, value )
this.$set( this.items, 3, { message: "four", id: "4" })//这样就可以渲染到视图层了
以上是关于this.$set()的主要内容，如果未能解决你的问题，请参考以下文章
Vue中this.$set与this.$nextTick()的使用
Vue 下拉列表绑定数据并刷新数据（this.$set(this,“roleList“,this.roleList)；）