javascript - VueJS - 对象 Prop 验证

Question

在 VueJS 中，如何验证 Object 类型的 props 以确保对象定义了一些特定的字段？

例如，我想确保 user prop 将具有字段“name”、“birthDate”等。

提前致谢。

Answer 1

您可以为对象创建自定义验证器函数:

https://v2.vuejs.org/v2/guide/components.html#Prop-Validation

props: {
    propF: {
        validator: function (value) {
            return value > 10
        }
    }
}

如果所有字段都存在，函数应返回 true。

示例:https://jsfiddle.net/wostex/63t082p2/27/

<div id="app">
<child :myprop="myObj"></child>
</div>

Vue.component('child', {
    template: `<span>{{ myprop.id }} {{ myprop.name }}</span>`,
    props: {
      myprop: {
        validator: function(obj) {
          return (obj.id && Number.isInteger(obj.id) && obj.name && obj.name.length );
        }
      }
    }
});

new Vue({
    el: '#app',
    data: {
      myObj: {
        id: 10,
        name: 'Joe'
      }
    }
});

如果验证器失败，您将在浏览器控制台中看到 Vue 警告。