Предупреждение Vuejs об ожидаемой найденной логической строке

#javascript #vue.js #vue-test-utils

#vuejs2

Вопрос:

Я новичок в Vuejs, я просто устанавливаю плагин vue-flip в Nuxtjs и пишу этот тег: Это тег в index.vue:

 <vue-flip active-hover="TRUE" class="flip">

и на консоли я вижу это предупреждение :

 [Vue warn]: Invalid prop: type check failed for prop "activeHover". Expected Boolean, got String with value "TRUE"

Я пытаюсь изменить значение true на 1, но по-прежнему сохраняется

Сообщение указывает на это местоположение в:

 ---> <Flip> at src/Flip.vue
       <Pages/index.vue> at pages/index.vue
         <Nuxt>
           <Layouts/default.vue> at layouts/default.vue
             <Root>

Как я могу избавиться от этого сообщения?

1. Просто добавить active-hover в качестве атрибута?

2. как это делается? объявление в реквизитах?

3. Заменить «TRUE» на «true»?

4. я пытаюсь, остается сообщение: [Vue warn]: Недопустимый реквизит: проверка типа не удалась для реквизита «activeHover». Ожидаемое логическое значение, получена строка со значением «true».

5. Это плагин: vue-flip.kevingrandemange.net

Ответ №1:

Вместо

 <vue-flip active-hover="TRUE" class="flip">

вы должны использовать

 <vue-flip v-bind:active-hover="true" class="flip">

или короче

 <vue-flip :active-hover="true" class="flip">

1. было бы неплохо объяснить, почему следует использовать директиву v-bind

2. @EttoreP без v: привязка значения внутри кавычек всегда является строкой. С помощью v-bind строка анализируется как выражение javascript.

3. Это то, что я всегда задавался вопросом: v-bind медленно ли? Или, по крайней мере, медленнее, чем без привязки? Например, если я скажу v-bind:bool="false" , нужно ли запускать другой поток javascript для разбора 'false' как false ?

Ответ №2:

При предоставлении реквизита без значения по умолчанию используется true

Измените это

 <vue-flip active-hover="TRUE" class="flip">

Для

 <vue-flip active-hover class="flip">

Ответ №3:

У меня была очень похожая проблема; я передавал логический реквизит дочернему компоненту из хранилища vuex. Моя проблема заключалась в том, что мой получатель на самом деле был строкой, и в моем компоненте я проверял, что это логическое значение.

Ошибка:

[Предупреждение Vue]: Недопустимый реквизит: не удалось выполнить проверку типа для реквизита «userIsAuthenticated». Ожидаемое логическое значение, получена строка со значением «true»

Вот как я решил свою проблему.

 // ParentComponent.vue 

...

computed: {
    userIsAuthenticated() {
        return this.$store.getters["user/authenticated"];  // String
        return this.$store.getters["user/authenticated"] === "true";  // Boolean
    },
}

 // ChildComponent.vue

...

props: {
    userIsAuthenticated: {
      type: Boolean,
      required: true,
      default: () => false,
    },
}

Чтобы расширить немного больше, в моем хранилище vuex я также мог бы сделать это:

 export const state = {
    authenticated: (localStorage.getItem("authenticated")) ?localStorage.getItem("authenticated") === "true" : false,
}