vue怎樣動態追加對象的屬性值

今天做篩選項目，通過點擊分類篩選對應商品

思路：

1.初始化一個對象類型的值，用於存放點選后的子項，

 

 

//data
    filterObj:{

        }

2.給子項添加點擊事件，將filterObj要接收的key和val作為參數傳遞進去

template:

          <li v-for="(info,ii) in item.queryList" 
            :key="ii" class="filter-item fl" 
            @click="changeFilter(item.key,info.value)" 
            >{{info.name}}</li>
          //item。key: 分類條件   info.value : 選中值

 3.完善該事件， 在此之前，有兩個易錯點

錯誤示范一：

 原因：在filterObj里分別添加了兩個鍵值相同的數據

錯誤示范二：

 

 原因：在該數據發生更新時，vue無法檢測到數據變化

將數據對象填充指定對象的寫法：

 methods:{
      changeFilter(key,val){
        // 使用set方法動態添加對象屬性值
        this.$set(this.filterObj,key,val); //對象名，該對象屬性，該對象該屬性值
        console.log(this.filterObj);
      }
    }

如下：

 

 

 

以上。