Vue - проверьте, используете ли вы последнюю опору цикла v-for

Question

Если у меня есть следующее свойство данных:

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

И хотел перебрать и вывести его следующим образом:

name: Joe, age: 35, department: IT

Пока что у меня есть:

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

Но это показывает:

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

с дополнительной запятой на конце, как я могу обнаружить, что это последняя пропа, и не показывать запятую? Я думаю, что v-show или v-if могут быть решением, но я не могу понять, как заставить это работать.

Answer 1

Вот один из способов.

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

Answer 2

Работает отлично

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

Answer 3

Вы также можете "обмануть", вставляя запятую перед каждым элементом, так как легче проверить первый элемент (key !== 0).

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

Answer 4

Вы можете сделать это с computed чтобы увидеть, если текущий индекс (третий параметр дляv-if) является последним свойством:

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

Тогда в вашем v-for:

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

Вот JSFiddle: https://jsfiddle.net/wv2ujxvn/

Answer 5

Это тоже работает.

<span v-for="(value,key) in persons" :key='key'>
    {{key}}: {{val}} 
    <span v-if="key+1 != persons.length">, </span>
</span>

Answer 6

Жаль, что во Vue нет ярлыка.

Лично я предпочитаю использовать небольшой CSS:

      <div class="list">
  <span>Item 1</span>
  <span>Item 2</span>
  <span>Item 3</span>
</div>

      .list span:not(:last-child)::after {
  content: ',';
}

Answer 7

Если вы хотите сохранить знания об этом шаблоне в коде, а не в переполнении стека, вы можете создать такой компонент:

<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>

Это не обязательно делает код замкнутым, но его легче запомнить:

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