Ошибка при рендеринге: «TypeError: Невозможно прочитать свойство 'length' с неопределенным значением"

Question

Я пытаюсь показать только оверлей, если мой поисковый ввод содержит какой-либо текст.

Это мой шаблон, где мое поле ввода:

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>

Тем не менее, это дает мне следующую ошибку:

[Vue warn]: Ошибка при рендеринге: «Ошибка типа: Ошибка чтениясвойство 'длина' из неопределенного "

Что я здесь не так делаю?

Answer 1

Вы никогда не должны получать доступ к данным компонента, как это. Это плохой способ. Вы должны взглянуть на 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>

Answer 2

$root - это самый верхний компонент в дереве (компонент, экземпляр которого вы создали с помощью new Vue()), и я не верю, что это Input.vue.

В любом случае, если Input.vue были корневым компонентом, доступ к состоянию компонента, как вы, является грязным.Если вы хотите обмениваться данными между компонентами, вы должны делать это через подпорки (потоки данных от родителя к потомку), или в более сложных случаях вам может понадобиться общее хранилище данных (например, Vuex ).