The picker data of the applet is Object Array

When we operate the picker component, we may have doubts about why there are rendering problems, or I just want to get the Chinese value. What should I do?

View layer

<view>数据是json的，直接展示</view>
picker使用说明：

<picker 
    mode="selector" 
    range-key="valuess" 
    range=&#39;{{school}}&#39; 
    model:value="{{currentSchool}}" 
    bindchange="handleChange"
>
  当前选择 {{school[currentSchool].valuess}}
  
</picker>

Logic layer

page({
    data: {
        school: [
            {"isNewRecord":false,"id":"2","keyss":"school","valuess":"湖南小学"},
            {"isNewRecord":false,"id":"3","keyss":"school","valuess":"北京小学"}
        ],
        currentSchool: ""
    }
    handleChange(e) {
        console.log(e)
        // 如果 range是一个 Object Array形式的，那这里的value就是索引下标
        let currentVal = e.detail.value
    
        // 对应的中文是
        let text = this.data.school[currentVal].valuess
        console.log('中文-->', text)
    },
})

Here, what we pass in is an array object Object Array type, so when we use the picker component, we must distinguish , the meaning of these fields, and how to obtain the value

range-key tells us what field is used to obtain the value when rendering. The following is the case where it is not specified. If it is a very simple data structure

similar: school: ["Chinese", 'Math', "Music"]

does not need to be specified. For complex data structures, specify fields and WeChat will automatically assign values ​​for us

Author: Zhiqingyu

model:value="{{currentSchool}}" You may find this, why is model bound in front of value

Because WeChat is not Two-way data binding, if you simply write value="{{Currently selected index subscript-currentSchool}}"

The currentSchool of the logical layer will not change, and the data must be modified through the bindchange event The data in, like the following

handleChange(e) {
    this.setData({
       currentSchool: e.detail.value
    })
}

The advantage of using model is that we don’t need to do the assignment operation. As long as we click OK in the upper right corner, the currentSchool in the data will be updated. Clicking Cancel will not update. The

of the data in data is the value we get from e.detail.value in handleChange. In fact, we may want text text

Just like the above, use the index to get the {} object attributes in the source data

There is also a common operation, which is to change school--schoolFilter into ["Hunan Primary School", " Beijing Primary School"] This simple structure, then e.detail.value gets the Chinese

But for this requirement, there are two arrays in the data schoolFilter--Array type and school--Object Array type , use range = "{{schoolFilter}}" in picker

Then to get other attributes of the source data, you must traverse the school and then get the value

Summary

• If you don’t want to write bindchange to change the data, use model:

• picker. The package in the start tag and end tag only selects the future content. You can Feel free to organize using text rendering or {{content}} rendering or view rendering or input rendering.

• Get other fields in the Object Array. If you don’t want to filter the data, use Object Array This structure can be accessed through index get off work. There is no need to build two fields in the data.

• Only by clicking the [OK] button displayed in the picker, the data in the picker will be updated.

Recommended tutorial: "WeChat Mini Program"

The above is the detailed content of The picker data of the applet is Object Array. For more information, please follow other related articles on the PHP Chinese website!