微信小程序this.setData给对象&数组动态赋值

1. 固定属性赋值

wxml:

<view>{
   
   {formData.title}}</view>

js:

data:{
    formData:{
        title:'hellow'
    }
}

这个时候页面上显示的是 hellow

当我们修改的时候有2种方案

// 方案一 整体赋值

this.data.formData.title = 'china';
this.setData({
    form:'china'
})

// 方案二 单个属性赋值
this.setData({
   'form.title':'china'
})
或
this.setData({
   ['form.title']:'china'
})

2.动态属性赋值

wxml:

<view wx:for="{
   
   {arr}}" wx:for-item="item" wx:key="*this">{
   
   {item.title}}</view>

js:

data:{
    arr:[
        {
            id:1,
            title:'标题一'
        },
        {
            id:2,
            title:'标题二'
        }
    ]
}

修改数组里对象的属性

let index = 0;
this.setData({
    `[arr[${index}].title]`:'china'
})
或
let name = this.data.arr[0].title;
this.setData({
    [name]:'china'
})

通过es6模版字符串 `` 的方式 key 可以作为变量

wxml:

<view>{
   
   {formData.a0}}</view>
<view>{
   
   {formData.a1}}</view>
<view>{
   
   {formData.a2}}</view>

js:

data:{
    formData:{
        a0:'111',
        a1:'222',
        a2:'333'
    }
}

循环修改

for(let i=0 ; i<2 ; i++){
    let name = `a${i}`;
    this.setData({
        [name]:'c'+i
    })
}

//显示结果
a0:c0
a1:c1
a2:c2

3.双向数据绑定

<input name="名称" type="text" value="{
   
   {formData.title}}" placeholder="请输入" />
<button bindtap="onSubmit">提交</button>

经过多次尝试提交获取到的formData.title数据为空，据说加上model:value会生效，然而并没有任何效果，甚至一度怀疑人生，直到找到一篇帖子说 2.9.3以上版本才支持

wx.getSystemInfo({
   success: function (res) {
        console.log('该版本号为: ',res.SDKVersion)
   }
})

// 输出结果该版本号为: 2.19.4

很显然不支持

网上搜索了一番，微信小程序居然没有双向数据绑定，如果想要动态改变 data 值需要用到 bindinput 方法拿到输入的值，再赋值给data，看到这里有点无语，既然找到了方法就写吧。

考虑到一个页面上可能存在多个input总不能每个都加一个bindinput方法吧，这样太鸡肋的，有没有办法写一个通用的。

wxml:

<input name="姓名" type="text" value="{
   
   {formData.title}}" 
data-name="title" bindinput="handleInput" placeholder="请输入" />

<input name="手机号码" type="text" value="{
   
   {formData.phone}}" 
data-name="phone" bindinput="handleInput" placeholder="请输入号码" />

<input name="地址" type="text" value="{
   
   {formData.address}}"  
data-name="address" bindinput="handleInput" placeholder="请输入" />

js:

data:{
    formData:{
        title:'',
        phone:'',
        address:''
    }
}

这样就可以用data-属性获取我当前需要修改的key，再结合上面动态变量

handleInput(e){
    let valueName = e.target.dataset.name;
    let name = `formData.${valueName}`;
    this.setData({
      [name]:e.detail.value
    })
  },

至此大功告成，虽然代码量没多少，如果不知道的话要花好多时间在这个上面。感谢前辈们的帖子，这里只描述了部分方法，还有很多更高级的用法，地址贴在下方。

参考网址：

https://blog.csdn.net/wuguidian1114/article/details/103293615

https://blog.csdn.net/weixin_47617631/article/details/126312443

https://blog.csdn.net/weixin_64397810/article/details/124218309

http://t.zoukankan.com/sgqwjr-p-9130744.html

https://blog.csdn.net/weixin_44151130/article/details/124649372

微信小程序this.setData给对象&数组动态赋值

猜你喜欢