I am in the process of making a search bar component. I have included a little cross button on the right which I want to appear if the users' input value length in the search field is bigger than 1.
This is what I have so far:
Template
<template lang="pug">
.search
.search__wrapper
form.search
input#search__input(
type="search"
v-model="taskSearch"
placeholder="Search"
)
img(v-if="task.Search.val.length < 1").resetText(src="../../assets/icons/cross-icon.svg")
</template>
I have tested the if statement with:
a: (v-if="0 < 1")
b: (v-if="2 < 1")
and it works perfectly - (a) hides the button and (b) makes it appear. I just don't know the Vue.js syntax to select the users' input value length from that specific field.
Any ideas?
Aucun commentaire:
Enregistrer un commentaire