微信小程序——使用setData修改數(shù)組中的單個對象

微信小程序已經(jīng)出來挺久的時間了,之前只是在文檔上粗略的看了一下,最近稍得空閑,便利用微信小程序平臺寫一個練手的項目,順便學(xué)習(xí)一下小程序開發(fā),感覺大體跟前端開發(fā)基本類似,但是因為是在微信的平臺上運行,具體還是要根據(jù)小程序的規(guī)則來編寫代碼的,其中還是有部分的內(nèi)容跟前端中常見的有所不同,于是接下來的博客里,也會順手記錄微信小程序開發(fā)過程中的一些坑,幫助后來的小程序開發(fā)者少踩一些坑,當(dāng)然我踩的坑大部分都是以前的開發(fā)者踩過的,我所做的也僅僅是記錄,分享。

習(xí)慣使用Vue或者React這類框架的開發(fā)者們,肯定不會對修改data內(nèi)中數(shù)組的單個對象而煩惱,因為這些框架已經(jīng)幫我們很好的處理了這個問題,并且在文檔上也寫的非常清楚。

比如要求是有一個數(shù)組存放了購物車的商品信息,而你在購物車內(nèi)修改了單個商品的期望購買數(shù)量后,我們就要動態(tài)的更新這個單個對象的購買數(shù)量值,如果在小程序里我們會怎么做呢?

如果你按照Vue的寫法來實現(xiàn)的話,不出意外會失敗。而微信小程序也只給我們提供了一個setData方法,這個方法是使用鍵值對的形式對數(shù)據(jù)進行修改,例如:

this.setData({
    name : 'leon'
})

回到我們剛剛的例子里,這時候,如果你想修改單個商品的數(shù)量信息,應(yīng)該怎么寫?

首先展示一種錯誤的寫法:

Page({
  data: {
    array: [{text: 'init data'}],
  },
  changeItemInArray: function (index) {
    this.setData({
      'array['+index+'].text':'changed data'
    })
  }
})

如果這樣動態(tài)的寫index,很顯然,這樣是無法使用在對象的key中的,我相信小程序的新手開發(fā)者可能嘗試過這樣的寫法。

那么正確的寫法究竟是怎么樣的呢?

changeItemInArray: function (index) {

  // 提前準備好對象
  var item = this.data.list[index]
  
  item.count = 100

  // 依舊是根據(jù)index獲取數(shù)組中的對象
  var key = "list["+ index + "]"

  this.setData({
    // 這里使用鍵值對方式賦值
    key: item 
  }, function () {})
}

最后,希望以后的小程序版本更新中,有更好的賦值方法。希望這篇文章能幫助到小程序的新手開發(fā)者。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 轉(zhuǎn)載鏈接 注:本文轉(zhuǎn)載知乎上的回答 作者:初雪 鏈接:https://www.zhihu.com/question...
    pengshuangta閱讀 29,328評論 9 295
  • Dear Fiona, 冥冥中,邂逅了緣,聽了成千上萬的網(wǎng)上音頻,也加了很多很多所謂音頻里的大咖。 在關(guān)注“活明白...
    語芯靜然閱讀 522評論 0 0
  • 打卡第六天 2018.03.08 1.新聞話題打卡: 科學(xué)家宣布在南極半島新發(fā)現(xiàn)一個巨大的企鵝棲息地。這個棲息地位...
    愛旅行的程程閱讀 144評論 0 0
  • 上次追劇已經(jīng)不知道是多少N年前了,時間有限,劇情吸引力不足,或許是醬樣兒吧,惟獨這個歡樂頌雖然歷時較長但終于是可以...
    太陽胖胖閱讀 361評論 0 0
  • 服飾是一種高明的政治,政治是一種高明的服飾。服飾的作用不僅是修飾儀容,而是在劃分等級地位,區(qū)分尊卑貴賤。酒店大堂的...
    rivert閱讀 1,225評論 4 7

友情鏈接更多精彩內(nèi)容