javascript - Vue.js 中的嵌套属性类型

Question

有什么方法可以跟踪 Vue 上的嵌套属性类型吗？

我有这个 Prop 设置:

// ...
props: {
    navigation: {
        type: [Array],
        default: () => {
            return [
                { type: String, icon: "home" },
                { type: String, icon: "star" }
            ]
        }
    }
}

现在我仅对第一级数组进行验证，但其中没有任何反应。我可以检查类型级别之一内的类型吗？谢谢帮助。

Answer 1

我认为不可能使用 type 属性直接键入对象数组，如 Vue prop validation说:

The type can be one of the following native constructors:

• String
• Number
• Boolean
• Function
• Object
• Array
• Symbol

话虽如此，您似乎可以定义一个验证器函数，例如:

props: {
    navigation: {
        validator: function (value) {
            if (!(value instanceof Array)) {
                return false;
            }
            for(var i = 0; i < value.length; ++i) {
                if (typeof value.icon !== "string") {
                    return false;
                }
            }
            return true;
        },
        default: () => {
            return [
                {icon: "home" },
                {icon: "star" }
            ]
        }
    }
}