1. 程式人生 > >微信小程式中修改data中屬性值

微信小程式中修改data中屬性值

最近在學習微信小程式開發,由於前段時間學習了vue框架,所以學起來也不是很吃力。
vue框架和微信小程式非常相似,但是vue的經驗卻導致自己今天踩了一天的坑。

vue中設定屬性值時只需要直接賦值就可以了,
類比之下,也在微信小程式中試了下,
別說,還真的行,列印輸出都沒有問題。
但是,接下來就掉坑了,頁面並沒有根據我更改的值進行重新整理。
一開始,我以為是框架的機制的原因,上網查閱資料後才知道了setData函式。

setData函式,微信小程式內部的修改引數的函式,使用格式如下:

  data: {
    option:false
  },
  change:function(){
   this.setData({
     option:!this.data.option
   })
    console.log(this.data.option);
  },

但是這種方法在修改陣列或者物件的單個屬性時就暴露出問題:
除非將所有的屬性都寫上,否則會覆蓋掉沒有寫的值。
這裡寫圖片描述
那麼換個思路只修改單個值,

array.name:wangyi,

或者是

array[name]:wanger

的形式是否可以呢?
答案是不行了,這樣寫編譯器會報錯。
不過我們可以換一種形式,將物件或者陣列的屬性轉變為字串就可以了。

change:function(){
   let temp = "array.name";
   this.setData({
     [temp]:'wangyi'
   })
    console.log(this.data.array);
  },