时间戳

首页 > 解决方案 > 渲染错误：“TypeError：无法读取未定义的属性‘长度’”

javascript - 渲染错误：“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>

但是，这给了我以下错误：

[Vue 警告]：渲染错误：“TypeError：无法读取未定义的属性‘长度’”

我在这里做错了什么？

标签： javascriptvue.jsvuejs2

解决方案

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

无论如何，如果Input.vue 是根组件，那么访问组件的状态是很麻烦的。如果你想跨组件共享数据，你应该通过 props（从父级到子级的数据流）来实现，或者对于更复杂的情况，你可能需要一个共享数据存储（例如Vuex）。

推荐阅读