Question

渲染时出错：“TypeError：无法读取未定义的属性‘length’”

2018-09-13

4047

javascript vue.js vuejs2

如果我的搜索输入包含任何文本，我尝试仅显示覆盖层。

这是我的模板，其中我的输入字段为：

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]: Error in render: "TypeError: Cannot read property 'length' of undefined"

我在这里做错了什么？

Answer 1

$root 是树中最顶层的组件（您使用 new Vue() 实例化的组件），我不认为它是 Input.vue 。

无论如何，如果 Input.vue 是根组件，则访问组件的状态会很麻烦。如果您想在组件之间共享数据，则应通过 props（数据从父级流向子级）来实现，或者对于更复杂的情况，您可能需要共享数据存储（例如 Vuex ）。

Answer 2

您永远不应该像这样访问组件数据。这是一种糟糕的方式。您应该看看 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>