javascript - 渲染错误 : "TypeError: Cannot read property ' length' of undefined"

Question

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

这是我的模板，我的输入字段是:

Input.vue:

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

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

当我 checkin 控制台时，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 是 根组件，那么访问组件的状态是很麻烦的。如果您想跨组件共享数据，您应该通过 Prop (数据从父级流向子级)来实现，或者对于更复杂的情况，您可能需要共享数据存储(例如 Vuex )。