将具有预定义键的对象数组作为道具传递给 Vue 3 组件

Question

使用 Composition API 将数组定义为 Vue 3 组件的 props 很简单...

<script setup>

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

</script>

现在这个数组应该是一个对象数组，如下所示。那也不是问题。

[
  {
    username: "foo",
    email: "foo@example.com"
  },
  {
    username: "bar",
    email: "bar@example.com"
  }
]

但是有没有办法定义数组中的每个对象都必须包含属性username和email？以便使用此组件的道具的人知道对象必须是什么样子？

Answer 1

您可以使用 prop 验证器来检查数组对象，例如：

<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>

将具有预定义键的对象数组作为道具传递给 Vue 3 组件

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

vue.js

vuejs3

vue-composition-api

vue-script-setup