VueJS : how to set a default value of a key / value in a prop of type array?

I’m learning Vue JS and I am creating my components. I’m stuck on an issue.

I would like to have my component taking in params an array of object like that :

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

So, I tried to implement my component with props :

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

However, I have no idea how to say that : if items does not contains active key, then it should have a false default value.

If you have any advices/links or explanations, I will be very grateful to you.

Answer

You can make a computed property which will fill-in those active: false by default, and override it with the provided items:

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

You would then use normalizedItems in your template instead of items