Question

我是Vuejs的新手，我只是在Nuxtjs上安装vue-flip插件并编写以下标签：这是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>

我如何摆脱此消息？

Answer 1

代替

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

您应该使用

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

或更短

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

Answer 2

我有一个非常相似的问题；我正在将一个布尔道具从 vuex 商店传递给一个子组件。我的问题是我的 getter 实际上是一个字符串 & 在我的组件中我验证它是一个布尔值。

错误：

<块引用>

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

Vuejs警告预期布尔值发现字符串

2 个答案: