I have a very simple form that has a search-bar and two buttons. I want the fill button to be displayed if there is a value in the input and only the empty button to be displayed if there is no value in the input. I want to affect the display or non-display of the buttons instantly and with any change, whether the input is full or empty. How is this handled in Vue js?
The scenario is that in fact the fill button is displayed when the input has a value, and by pressing it, the input is empty and reset, and as a result, the button itself is non-display and the empty button is displayed. The fill button is to empty the input when it has any value.
<form class="myform">
<button type="reset" class="fill">Show when fill </button>
<button class="empty">Show when empty</button>
<input type="search" class="myinput">
</form>
Below code should help.
<template>
<div id="app">
<form class="myform">
<button @click.prevent="reset" v-if="search" type="reset" class="fill">Show when fill
</button>
<button v-else class="empty">Show when empty</button>
<input v-model="search" type="search" class="myinput">
</form>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
search: null,
}
},
methods: {
reset() {
thid.search = null;
}
}
};
</script>