Vuejs 경고 예상 부울 발견 문자열

Vuejs 경고 예상 부울 발견 문자열

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"

나는 진실에서 1로 바꾸려고 노력하지만, 여전히 유지되고 있다.

이 위치를 가리키는 메시지 위치:

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

어떻게 하면 이 메시지를 없앨 수 있을까?

대신에

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

당신은 사용해야 한다.

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

또는 더 짧은

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

값이 없는 프로펠러를 제공할 때 기본값이 참임

변경 내용

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

로

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

나는 매우 비슷한 문제를 가지고 있었다; 나는 부울 소품을 부룩스 상점에서 아동 부품으로 전달하고 있었다.내 문제는 내 게터가 사실 끈이라는 거야 그리고 내 컴포넌트의 부울이라는 걸 증명하고 있었어

오류:

[부유 경고]:잘못된 프로펠러: 프로펠러 "userIs"에 대한 유형 검사 실패인증됨".예상 부울, 값이 "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,
}

참조URL: https://stackoverflow.com/questions/56060540/vuejs-warning-expected-boolean-found-string