web-dev-qa-db-fra.com

VueJS: Comment sortir un tableau séparé par des virgules?

Je sais que dans VueJS, je peux parcourir un tableau:

<span v-for="(element, index) in list">{{ element }}</span>

Mais si je voulais une liste séparée par des virgules? Par exemple, si list = ["alice", "bob", "chuck"], alors ce qui précède produira:

<span>alice</span><span>bob</span><span>chuck</span>

Ce que je veux, cependant, c'est:

<span>alice</span>, <span>bob</span>, <span>chuck</span>

Est-ce possible?

vue.jsvuejs2
15
Ben

Ce que j'ai fini par faire à la place était:

<span v-for="element in list" class="item">
  <span>{{ element }}</span>
</span>

Et en CSS:

.item + .item:before {
  content: ", ";
}
12
Ben

Vous pouvez utiliser le rendu conditionnel pour masquer le dernier , comme suit: 

var demo = new Vue({
  el: '#demo',
  data: function() {
    return {
      lists: ['Vue', 'Angular', 'React']
    };
  }
})
<script src="https://vuejs.org/js/vue.min.js"></script>
<div id="demo">
  <span v-for="(list, index) in lists">
    <span>{{list}}</span><span v-if="index+1 < lists.length">, </span>
  </span>
</div>

23
Saurabh

Si tout ce qui vous préoccupe est de séparer les virgules, utilisez la méthode join intégrée de Javascript:

{{ list.join(', ') }}
12
René Roth

Solution utilisant "template"

 <template v-for="(element, index) in list">
   <span>{{element}}</span><template v-if="index + 1 < list.length">, </template>
 </template>
7
Дмитрий Алфёров

Si vous voulez le faire de la manière JS, vous pouvez simplement faire une propriété calculée; vous pouvez même continuer la méthode span.

computed {
  listCommaSeparated () { return this.list.join(', '); },
  listCommaSpans () { return '<span>' + this.list.join('</span><span>') + '</span>'; },
},

Ce serait certainement le moyen privilégié du point de vue des performances de rendu.

3
Jody.LeBlanc

Vous pouvez le faire en utilisant un attribut v-if avec une condition sur le premier argument, en évitant l’utilisation de .length:

var app = new Vue({
  el: '#app',
  data: {
    list: ['john', 'fred', 'harry']
  }
})
<script src="https://vuejs.org/js/vue.min.js"></script><div id="app">
  <span v-for="(element, index) in list">
    <span v-if="index != 0">, </span><span>{{ element }}</span>
  </span>
</div>

2
Ulysse BN

Mieux vaut utiliser la méthode JS Array.join intégrée comme celle-ci

<span>{{ list.join(', ') }}</span>
1
Sergey Kozlov

Puis-je suggérer d'utiliser i> 0 comme chèque?

J'ai encapsulé le séparateur pour que {{''}} puisse être utilisé uniquement pour un espace et pour éviter que span soit traité comme étant vide.

<span
    v-for="(item, i) in list"
    :key="i">
   <span v-if="i>0">{{ ', ' }}</span>
   <span class="text-nowrap">{{ item }}</span>
</span>

ou

<span
    v-for="(item, i) in list"
    :key="i">
   <!-- if not wrapped in a span will leave a space before the comma -->
   <span>{{ (i > 0 ? ', ' : '') }}</span>
   <span class="text-nowrap">{{ item }}</span>
</span>
0
Antony Gibbs

Juste en ajoutant une autre alternative que je préfère utiliser:

<span v-for="(item, index) in list">
    {{ item }}{{ (index+1 < list.length) ? ', ' : '' }}
</span>
0
Gene Parcellano

Son échantillon possible
<span v-for="(item,i) in items"> {{(item !='' && i !=0) ? ',' : ''}} {{item.title}} </span>

0
Rajilesh Panoli

Mon composant:

<template>
<ul v-if="model.length">
    <li v-for="item in model">{{item}}</li>
</ul>
</template>
<style scoped>
ul {
    list-style: none;
}
li {
    display: inline-block;
}
li:not(:last-child)::after {
    content: ", ";
}
</style>
<script>
export default {
    props: ['model']
};
</script>
0
nclu