将具有预定义键的对象数组作为 props 传递给 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？这样使用该组件的 props 的人就知道这些对象必须是什么样子？

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>