Question

在VueJS中，如何验证对象类型道具以确保对象定义了某些特定字段？

例如，我想确保用户道具有字段'name'，'birthDate'等。

提前致谢。

Answer 1

您可以为对象创建自定义验证器功能：

https://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 warn。

Answer 2

这是一个示例验证器，我为一个类似的情况写了一个属性来传达屏幕上显示和隐藏的项目的显示延迟，以毫秒为单位。在这种情况下，该属性可以是＆＃34; show＆＃34;和＆＃34;隐藏＆＃34;，或者它可以是为每种情况定义不同延迟的对象。

我检查每个键的类型，我希望确保它匹配，在我的情况下，＆＃39;数字＆＃39;。如果缺少某个密钥，则该类型将被定义为“未定义”。就我而言，不允许使用负值。

props: {
    delay: {
        type: [Number, Object],
        default: 0,
        validator(value) {
            if (typeof value === 'number') {
                return value >= 0;
            } else if (value !== null && typeof value === 'object') {
                return typeof value.show === 'number' &&
                    typeof value.hide === 'number' &&
                    value.show >= 0 &&
                    value.hide >= 0;
            }

            return false;
        }
    },
}

Answer 3

我在 this example 中展示的使用 javascript 构造函数的方法也略有不同。

它使用构造函数 Person() 作为类型检查。这可能会导致代码更清晰。

但是请注意，otherObj 不会通过类型检查（请参阅控制台中的警告），因为它不使用构造函数。此方法强制您使用构造函数而不是对象。

该方法在 vue2-docs 和 vue3-docs 中有说明。

VueJS - 对象道具验证

3 个答案: