微信小程序使用this.setData()遇到的問題及解決方案詳解
前言
最近在學(xué)習(xí)小程序時遇到了關(guān)于setData()的不少問題，在這里做一些總結(jié)和記錄。
使用方法總結(jié)
在更改setData下的變量時,直接寫key名就可以了的,不用寫this.data.屬性,如下所示
Page({
data:{
value:'hello'
}
this.setData({
value:'修改的值'
//錯誤寫法：this.data.value:''
//注意key的名稱一定是data中的名稱
})
})setData的第二個參數(shù)是一個回調(diào)函數(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
})方法二：使用中擴(kuò)號
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}}">點(diǎn)我修改數(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,需要借助簡易雙向綁定機(jī)制
在對應(yīng)項目前加入model: 前綴即可
使用時控制臺會有警告：Do not have handler in component
原因是沒有綁定對應(yīng)的事件，在不影響結(jié)果的情況下可以無視報錯或者加一個空函數(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);
},在自定義組件中也能使用雙向綁定
注意點(diǎn)：用于雙向綁定的表達(dá)式有如下限制：
1、只能是一個單一字段的綁定，如下都是非法的；
<input model:value="值為 {{value}}" />
<input model:value="{{ a + b }}" />2、目前，尚不能支持data路徑的表達(dá)式，如
<input model:value="{{ a.b }}" />參考了一些帖子和官方文檔，如有錯誤或更好的方案，歡迎指出和交流！
總結(jié)
到此這篇關(guān)于微信小程序使用this.setData()遇到的問題及解決方案的文章就介紹到這了,更多相關(guān)小程序使用this.setData()問題解決內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
一個的簡易文本編輯器源碼...2007-03-03
這篇文章主要給大家介紹了關(guān)于利用Javascript如何開發(fā)一個二維周視圖日歷的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12
js定時器setInterval、clearInterval的使用方法舉例
Javascript的setTimeOut和clearInterval函數(shù)應(yīng)用非常廣泛,它們都用來處理延時和定時任務(wù),這篇文章主要給大家介紹了關(guān)于js定時器setInterval、clearInterval使用方法的相關(guān)資料,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細(xì)介紹了JS面向?qū)ο笾畣芜x框?qū)崿F(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
微信小程序?qū)崿F(xiàn)的3d輪播圖效果示例【基于swiper組件】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的3d輪播圖效果,結(jié)合實例形式分析了微信小程序基于swiper組件相關(guān)屬性設(shè)置、事件響應(yīng)操作技巧,需要的朋友可以參考下2018-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)單選選項卡切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
JavaScript雙向鏈表實現(xiàn)LRU緩存算法的示例代碼
本文主要介紹了JavaScript雙向鏈表實現(xiàn)LRU緩存算法的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-01-01
下面小編就為大家?guī)硪黄P(guān)于JS中二維數(shù)組的聲明方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-09-09
微信小程序?qū)崿F(xiàn)基于三元運(yùn)算驗證手機(jī)號/姓名功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)基于三元運(yùn)算驗證手機(jī)號/姓名功能,涉及三元運(yùn)算符的判定及字符串正則驗證相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了細(xì)說webpack6 Babel的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09