web-dev-qa-db-fra.com

v-for et v-if ne fonctionnent pas ensemble dans vue.js

Un formulaire est utilisé pour soumettre du texte et deux options qui indiquent vue dans quelle colonne afficher le texte. Lorsque le bouton radio col2 est coché, le texte soumis doit s'afficher dans la colonne 2. Cela ne se produit pas , sur la colonne 1, le texte s'affiche.

J'ai deux boutons radio qui doivent transmettre la valeur "un" ou "deux" à un nouveauInfo.option Sur soumettre une méthode a poussé les données du formulaire vers le tableau "info".

<input type="radio" id="col1" value="one" v-model="newInfo.col">
<input type="radio" id="col2" value="two" v-model="newInfo.col">

Ces données sont correctement envoyées dans le tableau "info" et je peux les parcourir. Je sais que cela fonctionne parce que je peux parcourir le tableau, un console.log toutes les données qu'il contient. Toutes les données du formulaire soumis sont là.

Ensuite, je répète deux fois ce tableau dans le modèle. Une fois pour info.col === "un" et l'autre itération ne devrait s'afficher que si info.col === "deux". J'utilise un v-for et un v-if ensemble, ce que la documentation de vue.js dit correct,

https://vuejs.org/v2/guide/conditional.html#v-if-with-v-for

<div class="row">
            <div class="col-md-6">
                <ol>
                    <li v-for="item in info" v-if="item.col==='one'">
                        text: {{ item.text }}, col: {{ item.col }}
                    </li>
                </ol>
            </div>
            <div class="col-md-6">
                <ol>
                    <li v-for="item in info" v-if="!item.col==='two'">
                        text: {{ item.text }}, col: {{ item.col }}
                    </li>
                </ol>
            </div>
        </div>

Le code complet de vue.js est sur github ici

Et il fonctionne sur gh-pages ici

vue.jsradio-buttonv-for
7
Shane G

Retirer ! à partir du deuxième si v-if="item.col==='two'"

mieux vous pouvez faire de cette façon (pour répéter une seule fois):

<div class="row" v-for="item in info">
            <div class="col-md-6">
                <ol>
                    <li v-if="item.col==='one'">
                        text: {{ item.text }}, col: {{ item.col }}
                    </li>
                </ol>
            </div>
            <div class="col-md-6">
                <ol>
                    <li v-if="item.col==='two'">
                        text: {{ item.text }}, col: {{ item.col }}
                    </li>
                </ol>
            </div>
        </div>
2
vpalade

Pourquoi ne pas utiliser la puissance de Propriétés calculées ?

computed: {
  infoOne: function () {
    return this.info.filter(i => i.col === 'one')
  },
  infoTwo: function () {
    return this.info.filter(i => i.col === 'two')
  }
}

Ensuite, sur chaque liste, il suffit d'itérer sur sa propriété respective sans avoir besoin de vérifier. Exemple

<ol>
   <li v-for="item in infoOne">{{item}}</li>
</ol>

Voici le travail violon

8
DobleL

Votre deuxième chèque est !item.col==='two' Et ne s'afficherait que s'il pas égal à "deux".

EDIT: Le! not operator est probablement lié plus étroitement que ===, ce qui renvoie toujours false. Ajoutez des crochets pour contrôler l'ordre d'application. Je dis probablement parce que cela peut être un peu de magie Vue que je ne connais pas, plutôt qu'une expression JavaScript pure.

Je pense que vous voulez supprimer ce point d'exclamation. Ou pour faire !(item.col==='one') pour afficher pour toute valeur autre que "un".

1
Raith

Il n'est pas recommandé d'utiliser v-if et v-for sur le même élément!

0
DragoRoff