微信小程序使用this.setData()遇到的問題如何解決

這篇“微信小程序使用this.setData()遇到的問題如何解決”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“微信小程序使用this.setData()遇到的問題如何解決”文章吧。

使用方法總結

在更改setData下的變量時,直接寫key名就可以了的,不用寫this.data.屬性,如下所示

Page({
    data:{
        value:'hello'
    }
    this.setData({
    value:'修改的值'
    //錯誤寫法：this.data.value:''
    //注意key的名稱一定是data中的名稱
})
})

setData的第二個參數(shù)是一個回調函數(shù)，在頁面渲染完后執(zhí)行。

this.setData({
      value:'hello'
    }, () => { //第二個參數(shù)
       console.log("在頁面渲染完value后再執(zhí)行");
    })

利用setData()修改數(shù)組對象下的一個屬性

方法一：使用雙引號或單引號

Page({
    data:{   
          List: [{
            id:0,
            name:'test01'
        }]
    }
})
this.setData({
   "List.id": 6
})

方法二：使用中擴號

this.setData({
   ['List.id']: 2
})

如果數(shù)組下有多個對象，我們要如何修改其中的一個屬性呢？

wxml部分代碼：

//wxml
<block wx:for="{{List}}" wx:key="index" id="{{index}}">
<view class="message">
<view>{{item.id}}、</view>
<view>{{item.name}}</view>
</view>

<button bindtap="change" id="{{item.id}}">點我修改數(shù)據(jù)中的name</button>
</block>

錯誤寫法：

//index.js
Page({
 data:{
        List:
        [{
            id:0,
            name:'test01'
        },
        {
            id:1,
            name:'test02'
        }],
    },
change(event){
    let index = event.currentTarget.id;
    this.setData({
    List[index].name:'newName'
})
}
})

這樣寫會報錯：

Only digits（0-9） can be put inside [] in the path string

正確寫法：

change(event){
 let index = event.currentTarget.id;
    this.setData({
    [`List[${index}].name`]:'newName'
})
}

簡易雙向綁定

如果需要在用戶輸入時改變this.data.value,需要借助簡易雙向綁定機制

在對應項目前加入model: 前綴即可

使用時控制臺會有警告：Do not have handler in component

原因是沒有綁定對應的事件，在不影響結果的情況下可以無視報錯或者加一個空函數(shù)

或者使用setData（）自己觸發(fā)綁定更新

<input type="text"  model:value="{{value1}}" bindinput="valueChange"/> 
<input type="text"  value="{{value2}}" bindinput="inputChange"/>

data:{
     value1:'',
     value2:''
}
//綁定model:并不出現(xiàn)警告的方法
valueChange(){
     console.log(this.data.value);
 }
//利用setData()更新
inputChange(e){
    let changeValue= e.detail.value;
    this.setData({
    value:changeValue
})
    console.log(this.data.value);
    },

在自定義組件中也能使用雙向綁定

注意點：用于雙向綁定的表達式有如下限制：

1、只能是一個單一字段的綁定，如下都是非法的；

<input model:value="值為 {{value}}" />
<input model:value="{{ a + b }}" />

2、目前，尚不能支持data路徑的表達式，如

<input model:value="{{ a.b }}" />

以上就是關于“微信小程序使用this.setData()遇到的問題如何解決”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業(yè)資訊頻道。