在Vue JS中，如果满足特定条件，如何对特定数组项进行编号

Question

假设我的vue状态中有一个对象数组，如下所示：

[
{name: "Daniel", default: false},
{name: "Ross", default: true},
{name: "Rachel", default: false},
{name: "Joey", default: false}
{name: "Monica", default: true}
{name: "Gunther", default: true}
]

在我的网页上，所有这些名字已经显示在一个列表中。我想在我的网页上显示的内容如下：

• 丹尼尔
• 罗斯-默认值1
• Rachel
• 乔伊
• Monica-默认2
• Gunther-默认值3

从上面的例子中，我认为我想要实现的目标非常清楚。在vue中实现这一点最简单的方法是什么？

Answer 1

尝试使用computed属性。检查以下代码片段

var app = new Vue({
el: '#app',
data() {
return {
list: [
{name: "Daniel", default: false},
{name: "Ross", default: true},
{name: "Rachel", default: false},
{name: "Joey", default: false},
{name: "Monica", default: true},
{name: "Gunther", default: true},
]
};
},
computed: {
getList() {
let index = 1;
return this.list.map(item => {
return item.default ? `${item.name} - Default ${index++}` : `${item.name}`;
});
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<template>
<ul>
<li v-for="(item, index) in getList" :key="index">
{{item}}
</li>
</ul>
</template>
</div>

Answer 2

您可以使用Array.map迭代所有数组元素并生成您想要的结果

const data = [
{ name: "Daniel" , default: false },
{ name: "Ross"   , default: true },
{ name: "Rachel" , default: false },
{ name: "Joey"   , default: false },
{ name: "Monica" , default: true },
{ name: "Gunther", default: true }
];
let defaultCount = 0;
const res = data.map(item => `${item.name}${item.default? ` default ${++defaultCount}`:''}`)
console.log(res)

Answer 3

你可以试试这个：

let defaultCount = 0;
const data = [
{ name: "Daniel", default: false },
{ name: "Ross", default: true },
{ name: "Rachel", default: false },
{ name: "Joey", default: false },
{ name: "Monica", default: true },
{ name: "Gunther", default: true },
].map((el) => {
if (el.default) {
defaultCount++;
return {
...el,
defCount: defaultCount,
};
} else {
return {
...el,
defCount: null,
};
}
});
console.log(data);

<li v-for="(item) in array" :key="item.name">
{{`${item.name}${item.defCount? ` - Default ${item.defCount}`:''}`}}
</li>