如果我的搜索输入框中包含任何文本,我想要显示一个覆盖层。
这是我的模板,其中包含我的输入框:
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]: 渲染错误:"TypeError: 无法读取未定义的属性“length”"
我在这里做错了什么?
this.$root
?您能提供有关不同组件的更多详细信息吗? - Thomas Lombartquery
对象作为属性传递给您的叠加组件:<overlay :query="query" />
并在Overlay.vue
中定义该属性。 - Thoomas