[vue.js]關於使用 element-ui datepicker 控件時修改數據視圖無變化的解決方法

問題描述:
在使用element-ui框架中的 datepicker 組件時,
須要本身根據條件手動修改時間範圍,
修改組件綁定的value 值從而引發視圖的變化
可是當我修改了value 值後,數值發生了變化,視圖沒有實時更新

使用組件:

<el-date-picker
      v-model="choosetimerange"
      type="date"
      value-format="timestamp"
      placeholder="選擇日期">
    </el-date-picker>

這裏個人時間範圍使用時間戳的形式展現

因而個人想法是,只要給數組從新賦值便可

錯誤代碼:

this.choosetimerange[0] = starttime
this.choosetimerange[1] = endtime

這樣執行後,發現數據發生了變化,但視圖仍停留在上一個選擇的時間段
查閱了相關資料後得出結論

問題分析:
在官網有這樣一段話:

若是在實例建立以後添加新的屬性到實例上，它不會觸發視圖更新。

也就是說,咱們在data中聲明或者已經賦值過的對象或者數組（數組中具備對象）時，向對象中添加新的屬性，若是更新此屬性的值，Vue 不能檢測到對象屬性的添加或刪除,所以不會更新視圖。

解決方法:
使用 vue 的$set 方法

語法結構:

修改數組 this.$set( Array, index , value)

修改對象 this.$set(Object,''key'',value)

this.$set(this.choosetimerange, 0, timeStart);
this.$set(this.choosetimerange, 1, timeEnd);

這樣就能既修改數據又更新視圖了