VueJS:如何在数组类型的道具中设置键/值的默认值

Question

我正在学习Vue JS，并正在创建我的组件。我陷入了一个问题。

我想让我的组件接收params这样的对象数组：

data() {
return {
items: [
{
text: 'Admin',
href: '#'
},
{
text: 'Manage',
href: '#'
},
{
text: 'Library',
active: true
}
]
}

因此，我尝试用道具来实现我的组件：

props: {
items: {
type: Array,
required: true
}

然而，我不知道该怎么说：如果项不包含活动键，那么它应该有一个错误的默认值。

如果您有任何建议/链接或解释，我将非常感谢。

Answer 1

您可以创建一个computed属性，默认情况下该属性将填充这些active: false，并用提供的项覆盖它：

props: {
items: {
type: Array,
required: true
}
},
computed: {
normalizedItems() {
return this.items.map(x => ({ active: false, ...x }));
}
}

然后在模板中使用normalizedItems而不是items