web-dev-qa-db-fra.com

Vue - vérifiez si vous êtes sur le dernier accessoire d'une boucle v-for

Si j'ai la propriété de données suivante:

person: {name: 'Joe', age: 35, department: 'IT'}

Et je voulais faire une boucle et la sortir comme suit:

name: Joe, age: 35, department: IT

Jusqu'ici j'ai:

<span v-for="(val, key) in person">{{key}}: {{val}}, </span>

Mais ceci affiche:

name: Joe, age: 35, department: IT,

avec une virgule supplémentaire à la fin, comment puis-je le faire détecter que c'est le dernier accessoire et ne pas montrer la virgule? Je pensais qu'un v-show ou v-if pouvait être la solution, mais je ne comprenais pas vraiment comment le faire fonctionner.

vue.jsv-for
10
Mankind1023

Voici un moyen.

<span v-for="(val,key,index) of person">key: {{key}}, val: {{val}}<span v-if="index != Object.keys(person).length - 1">, </span></span>
15
Bert

Vous pouvez le faire avec un computed pour voir si l'index actuel (troisième paramètre pourv-if) est la dernière propriété

computed: {
  last(){
     return Object.keys(this.person).length-1;
  }
}

Puis dans votre v-for:

<span v-for="(val, key, index) in person">{{key}}: {{val}}<span v-if="index !== last">, </span> </span>

Voici le JSFiddle: https://jsfiddle.net/wv2ujxvn/

8
craig_h

Fonctionne très bien 

<div id="app">
  <div v-for="(item, index) in items">
    <div v-if="index == items.length - 1">yes</div>
    {{ item }}, {{ index }}
  </div>
</div>
3
Abhishek kushwaha

Si vous souhaitez stocker les connaissances sur ce modèle dans le code plutôt que sur le dépassement de pile, vous pouvez créer un composant comme celui-ci:

<template>
  <span v-if="show"><slot></slot></span>
</template>
<script>
  export default {
    name: 'separator',
    props: ['items', 'index'],
    computed: {
      show () {
        return this.index !== (Array.isArray(this.items) ? this.items : Object.keys(this.items)).length - 1
      }
    }
  }
</script>

Cela ne rend pas nécessairement le code court-circuité, mais plus facile à retenir:

<span v-for="(val, key, index) of person">key: {{key}}, val: {{val}}<separator :items="person" :index="index">, </separator></span>
0
vsp