Vue-v-forループの最後の小道具にいるかどうかを確認する
次のデータプロパティがある場合:
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が解決策かもしれないと考えましたが、それをどのように機能させるかはわかりません。
これが一つの方法です。
<span v-for="(val,key,index) of person">key: {{key}}, val: {{val}}<span v-if="index != Object.keys(person).length - 1">, </span></span>
よく働く
<div id="app">
<div v-for="(item, index) in items">
<div v-if="index == items.length - 1">yes</div>
{{ item }}, {{ index }}
</div>
</div>
computed
を使用して、現在のインデックス(3番目のパラメーターforv-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/
これも機能します。
<span v-for="(value,key) in persons" :key='key'>
{{key}}: {{val}}
<span v-if="key+1 != persons.length">, </span>
</span>
first項目(key !== 0
)。
<span v-for="(val, key) in person">
<span v-if="key !== 0">, </span>
{{key}}: {{val}}
</span>
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>