I want to display an overlay only when there is text in my search input.
Below is the template for my input field:
Input.vue:
<template>
<div>
<input v-model="query" class="input" placeholder="Global search..."></input>
</div>
</template>
<script>
export default {
data() {
return {
query: '',
};
}
};
</script>
When I check the console, I can see that query updates with the text entered into the input field.
Next, I try to pass this variable to another component which contains my overlay div:
Overlay.vue:
<template>
<div v-if="this.$root.query.length > 0">
<div class="search-overlay is-active"></div>
</div>
</template>
But this approach results in an error message:
[Vue warn]: Error in render: "TypeError: Cannot read property 'length' of undefined"
Can you spot what I am doing wrong here?