Les données du sélecteur du mini programme sont Object Array

Lorsque nous utilisons le composant sélecteur, nous pouvons avoir des doutes sur la raison pour laquelle il y a des problèmes de rendu, ou je veux simplement obtenir la valeur chinoise, que dois-je faire ?

Couche de vue

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

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

Couche logique

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

Ici, ce que nous transmettons est un objet tableau Object Type de tableau, donc lorsque nous utilisons le composant sélecteur, nous devons distinguer , la signification de ces champs, et comment obtenir la valeur

range-key nous indique quel champ est utilisé pour obtenir la valeur lors du rendu. Ce qui suit est le cas où il n'est pas spécifié s'il s'agit d'un très. structure de données simple

Semblable à : école : ["Chinois", "Math", "Musique"]

n'a pas besoin d'être spécifié pour les structures de données complexes, spécifiez les champs et WeChat nous attribuera automatiquement des valeurs

<.>

Auteur : Zhiqingyu

model:value="{{currentSchool}}" Vous trouverez peut-être ceci, pourquoi le modèle est-il lié devant la valeur

parce que WeChat est pas de liaison de données bidirectionnelle, si vous écrivez simplement value="{{Currently selected index subscript-currentSchool}}"

currentSchool dans la couche logique ne changera pas, les données doivent être modifiées via l'événement bindchange. data in, comme ce qui suit

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

L'avantage d'utiliser model est que nous n'avons pas besoin de faire l'opération d'affectation Tant que nous cliquons sur OK dans le coin supérieur droit, l'école actuelle dans les données sera. mis à jour. Cliquer sur Annuler ne mettra pas à jour.

des données dans data La valeur que nous obtenons de e.detail.value dans handleChange est également un indice. voulez du texte texte

Utilisez simplement l'index pour récupérer les attributs d'objet {} dans les données source comme ci-dessus

Il existe également une opération courante, qui consiste à changer school--schoolFilter en [" Hunan Primary School", " Beijing Primary School"] Cette structure simple, puis e.detail.value obtient le chinois

Mais pour cette exigence, il y a deux tableaux dans les données : schoolFilter--Array type et school --Object Type de tableau, utilisez range = "{{schoolFilter}}" dans le sélecteur

Ensuite, pour obtenir d'autres attributs des données source, vous devez parcourir l'école puis obtenir la valeur

Résumé

• Si vous ne souhaitez pas écrire bindchange pour modifier les données, utilisez model:

• picker. Les packages dans la balise de début et de fin sélectionnent uniquement le contenu futur. Vous pouvez N'hésitez pas à organiser et à utiliser le rendu de texte ou le rendu {{content}} ou le rendu d'affichage ou le rendu d'entrée. Vous pouvez

.
• pour obtenir d'autres champs dans le tableau d'objets. Si vous ne souhaitez pas filtrer les données, utilisez le tableau d'objets. Cette structure est accessible via l'index hors travail. Il n'est pas nécessaire de créer 2 champs dans les données <.>

Seulement en cliquant sur le bouton [OK] affiché dans le sélecteur, les données du sélecteur seront mises à jour
Tutoriel recommandé : "<.>Mini-programme WeChat

"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!