VUEJS-对象支柱验证

Question

在vuejs中，如何验证对象类型props以确保对象具有某些特定字段？

例如，我想确保用户道具将具有"名称"，"出生日期"等字段。

预先感谢。

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

Answer 2

使用JavaScript构造函数也有一种稍微不同的方法，我在此示例中显示。

它将构造函数函数Person()用作类型检查。这可能会导致清洁码。

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

该方法在VUE2-DOC和VUE3-DOC中进行了解释。

Answer 3

这是我为一个类似情况编写的示例验证器，用于属性，以传达出现在屏幕上并从屏幕上(以毫秒(隐藏的项目的显示延迟。在这种情况下，属性可以是" show"one_answers" hide"的数字，也可以是定义每种情况不同延迟的对象。

我检查了我期望确保其匹配的每个键的类型，以"数字"。如果缺少键，则类型将"未定义"。就我而言，不允许负值。

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;
        }
    },
}