렌더 오류: "TypeError: 정의되지 않은 속성 '길이'를 읽을 수 없음"

렌더 오류: "TypeError: 정의되지 않은 속성 '길이'를 읽을 수 없음"

검색 입력에 텍스트가 포함된 경우 오버레이만 표시하려고 함.

입력 필드가 있는 템플릿:

Input.vue:

<template>
    <div>
        <input v-model="query" class="input" placeholder="Global search..."></input>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                query: '',
            };
        }
    };
</script>

콘솔을 체크인할 때query입력 필드에 쓰는 텍스트에 대한 업데이트.

그런 다음 이 변수를 내 오버레이 div를 고정하는 다른 구성 요소로 전달하려고 한다.

Overlay.vue:

<template>
    <div v-if="this.$root.query.length > 0">
        <div class="search-overlay is-active"></div>
    </div>
</template>

그러나 이것은 나에게 다음과 같은 오류를 준다.

[부유 경고]:렌더 오류: "TypeError: 정의되지 않은 속성 '길이'를 읽을 수 없음"

내가 여기서 뭘 잘못하고 있는 거지?

$root트리에서 가장 높은 구성 요소(인스턴트로 인스턴스화한 구성 요소)new Vue()()이러한 것은 아닌 것 같다.Input.vue.

어떤 경우라도Input.vue 루트 구성 요소로서, 구성 요소의 상태가 지저분할 때 액세스하십시오.구성 요소 간에 데이터를 공유하려면 소품(부모에서 자식으로의 데이터 흐름)을 통해 공유해야 하며, 더 복잡한 경우에는 공유 데이터 저장소(예: Vuex)가 필요할 수 있다.

이런 구성 요소 데이터에 절대 액세스해서는 안 된다.그건 나쁜 방법이야.당신은 VueX와 국가 관리 패턴에 주목해야 한다. 당신이 여기에 가지고 있는 전형적인 사례.

• https://vuex.vuejs.org/

그러나 VueX(또는 상태 관리 패턴에 다른 도구)를 사용하지 않으려면 다음과 같은 이벤트를 사용하십시오.

var Input = Vue.component('custom-input', {
  name : "custom-input",
  template : "#custom-input-template",
  props : ["value"],
  methods : {
    onInput(){    
      this.$emit('input', this.$refs.queryInput.value)
    }
  },
  created() {
    console.log("Custom-input created")
  }
});

var Overlay = Vue.component('custom-overlay', {
  name : "custom-overlay",
  template : "#custom-overlay-template",
  props : ["query"],
  created() {
    console.log("Custom-overlay created")
  }
});

new Vue({
    el: "#app",
    components : {
      Input,
      Overlay
    },
    data: {
		  query : null
    }
})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
	<div>		
		 <custom-input v-model="query"></custom-input>
		 <custom-overlay v-show="query && query.length > 0" :query="query"></custom-overlay>
	</div>
</div>


<script type="text/x-template" id="custom-input-template">
    <div>
        <input :value="value" ref="queryInput" class="input" placeholder="Global search..." @input="onInput"></input>
    </div>
</script>

<script type="text/x-template" id="custom-overlay-template">
  <div>
	  {{query}}
  </div>
</script>

참조URL: https://stackoverflow.com/questions/52314817/error-in-render-typeerror-cannot-read-property-length-of-undefined