//在树状图所有层级找到 id等于x102的节点。
let id=“x102”;
let plot = util.findNode(this.treeData[0], id); //plot.checked=true; // 树状图点击一下才会显示选中状态。 //this.$set(plot.checked, true);//报错:属性不存在。 this.$set(plot,"checked", true); //正确 console.log('plot',plot.checked); //trueutil.findNode = function (tree, id) { if (tree.id === id) { return tree; } let stack = []; stack.push(tree); var tmpNode; while (stack.length > 0) { tmpNode = stack.pop(); if (tmpNode.id === id) { return tmpNode; } if (tmpNode.children && tmpNode.children.length > 0) { var i = tmpNode.children.length - 1; for (i = tmpNode.children.length - 1; i >= 0; i--) { stack.push(tmpNode.children[i]); } } } };
拓展知识:
一、修改对象的某个属性:
https://blog.csdn.net/panyang01/article/details/76665448
Vue2.0 $set()的正确使用方式
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)(ps: 可能是vue1.0的写法)
mounted () {
this.$set(this.student.age, 24)
}
正确写法:this.$set(this.data,”key”,value’)
mounted () {
this.$set(this.student,"age", 24)
}
二、修改数组的某个元素:
https://blog.csdn.net/zsm4623/article/details/88529893
vue中的$set和Vue.set方法
当我们使用vue开发时经常会遇到当vue实例已经创建好了,有时候需要再次给数据赋值时,并不能在视图中改变
在vue文档中写着如果在实例创建之后添加新的属性到实例上,它不会触发视图更新
因此比如我们修改一个数组其中的一个值,或者添加一条数据时,不管用。
<div id="app">
<p v-for="item in items" v-once>{{item}}</p>
<button @click="btn()">添加</button>
</div>
new Vue({
el:'#app',
data:{
items:['a', 'b', 'c']
},
methods:{
btn(){
this.items[1] = 'd'
console.log(this.items);
}
}
})
发现修改失败。
Vue.set() 方法
参数1: 要修改的对象
参数2: 属性
参数3: 属性的值是啥
返回值:已经修改好的值
有三种方法可以实现,分别是Vue.set, vm.$set, replace
var vm =new Vue({
el:'#app',
data:{
items:['a', 'b', 'c']
},
methods:{
btn(){
Vue.set(this.items, 1, 'e')
console.log(this.items)
}
}
})
发现修改完了。
var vm =new Vue({
el:'#app',
data:{
items:['a', 'b', 'c']
},
methods:{
btn(){
this.$set(this.items, 1, 'e')
console.log(this.items)
}
}
})
修改完毕。