Question

我正在尝试为Vue组件的prop创建一个validator函数。

validator函数需要导入的对象来进行验证，但是，运行validator函数时，导入的对象为undefined。

一旦安装了组件，就会定义导入对象（因此导入语法没有问题）。

我组件的Javascript代码如下：

<script>
    import {EventTypes, PageTypes, logger} from "../core/EventLogger";
    import FAQ from "./FAQ";
    export default {
        name: "MobilityFAQs",
        components: {
            FAQ
        },
        props: {
            faqs: {
                required: true,
                type: Array
            },
            pageType: {
                required: true,
                validator: value => {
                    return value in PageTypes
                    // PageTypes is undefined here.
                }
            }
        },
        mounted() {
            console.log(PageTypes);
            // PageTypes is defined here.
        }
    }
</script>

使用不同的函数定义语法会发生相同的问题：

validator: function(value) {
    return value in PageTypes
}

文档中警告，您将无法按预期访问validator函数中的实例属性，但这不是实例属性。

请注意，在创建组件实例之前会先验证props，因此实例属性（例如数据，计算的等）在默认或验证器函数中将不可用。

如何在validator函数中使用导入的对象？

根据Jacobs的答案进行更新：

我错误地使用了Javascript的in运算符。

我更新后的validator函数现在是：

validator: value => Object.values(PageTypes).includes(value)

Answer 1

（只是一个猜测，如果不正确，将会删除）

PageTypes实际上是定义的，但是您错误地使用了in运算符。这就是验证失败的原因。

value in PageTypes检查value是否是PageTypes中的键/属性。与PageTypes.hasOwnProperty(value)相同。

您实际要做的可能是检查对象值，而不是对象键。如果是这样，请使用Object.values(PageTypes).includes(value)

无法在Vue道具验证器中使用导入的对象

1 个答案: