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

Posted 2023-04-02 JinzRin

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()

参考技术A 在小程序中使用this.setData()方法是非常常见的,通过这个方法,可以将data中的变量进行赋值.那么如果遇到下面这种情况:

如果此时我想修改 belineData 对象下的 name 的值,我们可以这样操作

这样就可以把字符串赋值给对象下的 name 属性

这个时候,我们需要给 belineData 数组下的第一个对象赋值的话.大概脑子里想的应该是:

然后,我们会发现,这样写并不行.而要通过ES6的标识符来实现

使用变量的部分要 $ 套用起来就可以了.