微信小程序使用this.setData()遇到的問題及解決方案詳解
前言
最近在學習小程序時遇到了關于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()遇到的問題及解決方案的文章就介紹到這了,更多相關小程序使用this.setData()問題解決內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了p5.js實現(xiàn)動態(tài)圖形臨摹，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
JavaScript實現(xiàn)數(shù)組去重的十種方法分享
去重是開發(fā)中經(jīng)常會碰到的一個熱點問題，這篇文章主要介紹了JavaScript中實現(xiàn)數(shù)組去重的10種方法，文中的示例代碼講解詳細，感興趣的可以了解一下2022-11-11
這篇文章主要為大家介紹了使用JS?簡單實現(xiàn)滑塊驗證碼示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
將Datatable轉化成json發(fā)送前臺實現(xiàn)思路
將Datatable轉化成json可以將dt序列化成json，放到前臺的隱藏控件hidBoundary中，具體的實現(xiàn)如下，有類似需求的朋有可以參考下2013-09-09
這篇文章主要為大家詳細介紹了javascript實現(xiàn)列表切換效果的相關資料,需要的朋友可以參考下2016-05-05
這篇文章主要針對Bootstrap布局組件應用進行實例講解，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要介紹了JS中作用域以及變量范圍分析,需要的朋友可以參考下2020-07-07
如果要操作一個元素，首先要獲取到它，下面為大家介紹下document節(jié)點對象的獲取方式，感興趣的朋友不要錯過2013-12-12
這篇文章主要為大家詳細解析了bootstrap滾動監(jiān)控器使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
利用ajaxfileupload插件實現(xiàn)文件上傳無刷新的具體方法
利用ajaxfileupload插件實現(xiàn)文件上傳無刷新的具體方法，需要的朋友可以參考一下2013-06-06