javascript-呈现错误：“ TypeError：无法读取未定义的属性’length’”

如果我的搜索输入中包含任何文本,我只会尝试显示一个覆盖图.

这是我的模板,我的输入字段是：

Input.vue：

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

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

当我在控制台中签入时,查询更新为我在输入字段中写入的任何文本.

然后,我尝试将此变量传递给另一个组件,该组件保存我的覆盖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”

我在这里做错了什么？

解决方法:

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

无论如何,如果Input.vue是根组件,那么按原样访问组件的状态是很麻烦的.如果要跨组件共享数据,则应通过prop(从父级到子级的数据流)进行共享,或者在更复杂的情况下,您可能需要共享数据存储区(例如Vuex).

标签：vue-js,vuejs2,javascript
来源： https://codeday.me/bug/20191108/2008864.html