Невозможно использовать импортированный объект в валидаторе Vue props - PullRequest
Новая
       18

Невозможно использовать импортированный объект в валидаторе Vue props

0 голосов
/ 17 мая 2019

Я пытаюсь создать функцию validator для реквизита компонента Vue.

Функция 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, так какожидается, но это не свойство экземпляра.

Обратите внимание, что реквизиты проверяются перед созданием экземпляра компонента, поэтому свойства экземпляра (например, данные, вычисления и т. д.) не будут доступны внутри default или validatorфункции.

Как использовать импортированный объект в функции validator?

Обновление после ответа Джейкобса:

Я был янеправильно используя оператор in Javascript.

Моя обновленная функция validator теперь: 

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

1 Ответ

2 голосов
/ 17 мая 2019

(Просто предположение .. удалит, если это не так)

PageTypes фактически определено, но вы используете оператор in неправильно.Вот почему проверка не пройдена.

value in PageTypes проверьте, является ли value ключом / свойством в PageTypes.Это то же самое, что и PageTypes.hasOwnProperty(value).

То, что вы на самом деле хотите сделать, это проверка значения объекта, а не ключа объекта.Если это так, используйте Object.values(PageTypes).includes(value)

...