jeudi 21 septembre 2017

Vue.js: Search bar component - how to make a reset button appear if input value length is > 1?

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