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来解决，但是还不知道具体如何实现。

- Mankind1023

---

可能是 http://stackoverflow.com/q/41761831/1610034 的重复问题。 - Saurabh

Answer 1

这里有一种方法。

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

- Bert

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>

- Abhishek kushwaha

Answer 3

你也可以通过在每个项目之前插入逗号来“作弊”，因为这样更容易检查第一个项目（index !== 0）。

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

- Drasill

---

这并没有解决获取数组中“最后一个”项目的目标。它只获取“不是第一个”的项目。 - TetraDev

这个解决方案应该可行，不同意TetraDev的观点。这个解决方案只是不能显示第一个条目前面的逗号。但它确实能在所有其他条目前面显示逗号。是个好的简单解决方案。 - RollingInTheDeep

我甚至觉得这不算作弊 :) - Jev Prentice

如果您无法轻松确定长度，则此方法非常有效。 - Ehrlich_Bachman

mtpultz，甚至更短 <span v-if="index">, </span> - undefined

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/

- craig_h

Answer 5

这也是可行的：

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

- ManuEl Magak

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: ',';
}

- Pierre de LESPINAY

Answer 7

如果您想要将这个模式的知识存储在代码中而不是在Stack Overflow上，您可以创建一个类似于这样的组件：

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

- vsp