iview tree checked 問題:子節點選中了,但是父節點沒選中

  

  //在樹狀圖所有層級找到 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); //true
util.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);
		}
	}
})

 

item
發現修改失敗。

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)
		}
	}
})

 

Vue.set
發現修改完了。

 var vm =new Vue({
	el:'#app',
	data:{
		items:['a', 'b', 'c']
	},
	methods:{
		btn(){
			this.$set(this.items, 1, 'e')
			console.log(this.items)
		}
	}
})

vm.$set

修改完畢。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章