javascript - VueJS：如何在类型数组的道具中设置键/值的默认值？

Question

我正在学习 Vue JS，我正在创建我的组件。我被困在一个问题上。

我想让我的组件接受 params 一个这样的对象数组：

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

所以，我尝试用 props 实现我的组件：

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

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

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

标签： javascriptvue.js

Answer 1

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

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

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