微信小程序this.setData给对象

  1. 固定属性赋值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<view class="container">
    <view class="header" bind:tap="getUserProfile">
        <van-image
        round
        width="5rem"
        height="5rem"
        src="{{userInfo.avatarUrl}}"
        />
        <view class="info">
            <view>
                {{userInfo.username}}
            </view>
            <view bind:tap="edit">
                编辑资料
                <van-icon name="arrow" />
            </view>
        </view>
    </view>
</view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
data: {
    userInfo:{
        username:"",
        name:'',
        class:'',
        stuNum:'',
        gender:'',
        avatarUrl:''
    }
},
getUserProfile(e) {
    wx.getUserProfile({
      desc: '用于完善个人资料',
      success: (res) => {
        const name = res.userInfo.nickName
        const Url = res.userInfo.avatarUrl
        this.setData({
          username:name,
          avatarUrl:Url
        })
      }
    })
  },

这个时候页面上显示的是 空白

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 方案一 整体赋值
 
this.data.formData.title = 'china';
this.setData({
    userInfo: res.userInfo,
})
 
// 方案二 单个属性赋值
const name = res.userInfo.nickName
const Url = res.userInfo.avatarUrl
this.setData({
    'userInfo.username':name,
    'userInfo.avatarUrl':Url
})

2.动态属性赋值

1
<view wx:for="{{arr}}" wx:for-item="item" wx:key="*this">{{item.title}}</view>
1
2
3
4
5
6
7
8
9
10
11
12
data:{
    arr:[
        {
            id:1,
            title:'标题一'
        },
        {
            id:2,
            title:'标题二'
        }
    ]
}

修改数组里对象的属性

1
2
3
4
5
6
7
8
9
let index = 0;
this.setData({
    `[arr[${index}].title]`:'china'
})
或
let name = this.data.arr[0].title;
this.setData({
    [name]:'china'
})

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

1
2
3
<view>{{formData.a0}}</view>
<view>{{formData.a1}}</view>
<view>{{formData.a2}}</view>

循环修改

1
2
3
4
5
6
7
8
9
10
11
for(let i=0 ; i<2 ; i++){
    let name = `a${i}`;
    this.setData({
        [name]:'c'+i
    })
}
 
//显示结果
a0:c0
a1:c1
a2:c2

3.双向数据绑定

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

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

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

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

很显然不支持

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

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

1
2
3
4
5
6
7
8
<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="请输入" />
1
2
3
4
5
6
7
data:{
    formData:{
        title:'',
        phone:'',
        address:''
    }
}

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

1
2
3
4
5
6
7
handleInput(e){
    let valueName = e.target.dataset.name;
    let name = `formData.${valueName}`;
    this.setData({
      [name]:e.detail.value
    })
  },