Dev Faq
0
votes

Même V-for Loop dans deux différents

Je veux mettre la même boucle V-V-for dans deux

. Existe-t-il un moyen d'utiliser une boucle V-pour une seule fois?

Voici un exemple: xxx

2 commentaires

Ce que vous avez, il semble que ce soit exactement le moyen normal et raisonnable de le faire. Y a-t-il une raison particulière pour laquelle vous voulez trouver une autre façon?

@Ilmarikaronen Peu de temps après avoir étudié Vue.js, je pensais que je ne devrais pas utiliser la même boucle deux fois.

3 Réponses :

0
votes

Vous pouvez simplement déplacer le V-pour sur un conteneur DIV et l'utiliser plusieurs fois. Dans l'exemple ci-dessous, vous créerez 2 divs avec accès au même article. 

<div v-for="(item, index) in items" :key="index"
     class="parent-v-for">

  <div class="v-for-1">
    {{item}}
  </div>

  <div class="v-for-2">
    {{item}}
  </div>

</div>

5 commentaires

Ouais. Et si vous ne voulez pas que le wrapper div soit rendu, il suffit d'utiliser à la place

@HenrikClAusen ne serait pas causer à des problèmes de rendu étranges avec le modèle rendu plusieurs fois à l'intérieur du même composant. Si j'essaie de créer deux modèles ou d'essayer d'utiliser deux racines

à l'intérieur du même modèle, VUE me donne une erreur. Je n'ai jamais essayé de V-pour sur une étiquette de modèle cependant.

Je l'utilise souvent dans des tables où j'ai besoin de lignes doubles. .... .... Pas de problème. Ainsi, bien que l'OP obtiendra une boucle avec 1-2, 1-2, 1-2 non 1,1,1 2,2,2 qu'il peut vouloir. Ensuite, sa propre suggestion est la meilleure.

@Zoecode Pas un problème, si vous avez trouvé l'une des réponses fonctionnées, assurez-vous de le marquer comme la réponse à une référence future. Bonne chance!

@Scornwell j'ai choisi un. Merci :)

1
votes

Je ne sais pas ce que vous voulez exactement réaliser, mais vous pouvez faire quelque chose comme ça si vous souhaitez imprimer deux divs dans la même boucle: 

    <div class="v-for-1">
      <div v-for="(item, index) in items" :key="index">
        <div> blah blah </div>
        <div> blah blah </div>
      </div>
    </div>

2 commentaires

Désolé pour le manque d'explication. Merci d'avoir répondu.

Je vous en prie. Je suis heureux que si cela vous a aidé.

0
votes

Vous devez créer un composant et l'appeler deux fois:

vfor.vue xxx

puis: xxx

ou xxx

0 commentaires

Articles qui pourrait vous intéresser :

Est-il possible de créer une application vue sans vue-cli?
Comprendre la liaison bidirectionnelle Vue JS v-model
Vue.js 3 Event Bus
Laravel Echo n'écoute pas