欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序使用this.setData()遇到的問題及解決方案詳解

 更新時(shí)間：2022年08月23日 08:55:26   作者：一只程序龜  
this.setData估計(jì)是小程序中最經(jīng)常用到的一個(gè)方法,但是要注意其實(shí)他是有限制的,忽略這些限制的話,會(huì)導(dǎo)致數(shù)據(jù)無法更新,下面這篇文章主要給大家介紹了關(guān)于微信小程序使用this.setData()遇到的問題及解決方案,需要的朋友可以參考下

前言

最近在學(xué)習(xí)小程序時(shí)遇到了關(guān)于setData()的不少問題，在這里做一些總結(jié)和記錄。

使用方法總結(jié)

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

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

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

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

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

方法一：使用雙引號(hào)或單引號(hào)

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

方法二：使用中擴(kuò)號(hào)

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

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

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>

錯(cuò)誤寫法：

//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'
})
}
})

這樣寫會(huì)報(bào)錯(cuò)：

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'
})
}

簡易雙向綁定

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

在對(duì)應(yīng)項(xiàng)目前加入model: 前綴即可

使用時(shí)控制臺(tái)會(huì)有警告：Do not have handler in component

原因是沒有綁定對(duì)應(yīng)的事件，在不影響結(jié)果的情況下可以無視報(bào)錯(cuò)或者加一個(gè)空函數(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、只能是一個(gè)單一字段的綁定，如下都是非法的；

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

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

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

參考了一些帖子和官方文檔，如有錯(cuò)誤或更好的方案，歡迎指出和交流！

總結(jié)

到此這篇關(guān)于微信小程序使用this.setData()遇到的問題及解決方案的文章就介紹到這了,更多相關(guān)小程序使用this.setData()問題解決內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論