Maison  >  Questions et réponses  >  le corps du texte

Composant de modèle ComboBox utilisant VueJS

<p>我想使用 <code>vuejs v3</code> 制作一个 <strong>Combobox</strong> 模板组件,为此我有以下代码:</p> <pre class="brush:html;toolbar:false;"><template> <select name={{selector_name}} class= "combobox" id={{selector_id}}> v-for=opter pour {{selector_options}} <valeur de l'option=opt> opter </option> </sélectionner> </modèle> <script> exporter par défaut { nom : 'ComboBox', données() { retour { nom_sélecteur : nul, selector_id : nul, selector_options : nul, } }, accessoires : { nom_sélecteur : { tapez : chaîne, obligatoire : vrai }, ID_sélecteur : { tapez : chaîne, par défaut : "combobox" }, options_sélecteur : { tapez : tableau, obligatoire : vrai } }, méthodes : { onChange : (événement) => { console.log(event.target.value); }, }, calculé : {}, } </script> ≪/pré> <p>但是我使用 <code>v-for</code> 的方式对我来说似乎不正确,你能告诉我如何纠正吗?提前致谢。</p>
P粉550323338P粉550323338434 Il y a quelques jours453

répondre à tous(1)je répondrai

  • P粉616111038

    P粉6161110382023-09-04 16:19:58

    Je vois beaucoup de choses, pour répondre clairement à votre question, v-for est utilisé sur les éléments.

    <template>
        // For mor readability i recommend you do bind your property:
        //  - name={{selector_name}} become :name="selector_name"
        <select :name="selector_name" class= "combobox" :id="selector_id">
            <!-- v-for is required with a unique key, you can take the index and use it -->
            <option v-for="(opt, index) in selector_options" :key="`opt ${index}`" value=opt>
               {{ opt }}
            </option>
        </select>
    </template>
    

    Vous ne pouvez pas définir d'accessoires et de données portant le même nom. Props, injectez des propriétés et des valeurs dans les données. Exactement pareil, mais les données proviennent du parent et vous transmettez les valeurs du parent à l'enfant.

    Donc, si vous devez transmettre des données, utilisez des accessoires mais ne les définissez pas dans les données.

    Il existe un exemple fonctionnel tout cela (j'ai utilisé des données au lieu d'accessoires pour améliorer la lisibilité). < /p>

    répondre
    0
  • Annulerrépondre