Pass array of objects with predefined keys as props to Vue 3 component

Question

Defining an array as props for a Vue 3 component using the Composition API is simple...

<script setup>

defineProps({
  items: {
    type: Array,
    required: true,
  },
});

</script>

Now this array should be an array of objects like the following. That's not a problem either.

[
  {
    username: "foo",
    email: "[email protected]"
  },
  {
    username: "bar",
    email: "[email protected]"
  }
]

But is there a way to define that each object in the array must contain the properties username and email? So that someone using this component's props knows what the objects must look like?

Boussadjra Brahim · Accepted Answer · 2022-06-01 21:42:41Z

5

You could use the prop validator to check the array objects like:

<script setup>

defineProps({
  items: {
    type: Array,
    required: true,
    validator(val){
       let isValidObj= val.every(obj=>obj.hasOwnProperty('username') && obj.hasOwnProperty('email') )
      if(!isValidObj){
         console.warn('The object should have username and email');
         return false
       }
      return true;
    }
  },
});

</script>

edited Jun 1, 2022 at 21:42

answered Jun 1, 2022 at 19:40

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Pass array of objects with predefined keys as props to Vue 3 component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related