Tengo un formulario muy simple que tiene una barra de búsqueda y dos botones . Quiero que se muestre el botón de relleno si hay un valor en la entrada y solo que se muestre el botón vacío si no hay ningún valor en la entrada. Quiero afectar la visualización o no visualización de los botones al instante y con cualquier cambio, ya sea que la entrada esté llena o vacía. ¿Cómo se maneja esto en Vue js?
El escenario es que, de hecho, el botón de relleno se muestra cuando la entrada tiene un valor, y al presionarlo, la entrada está vacía y se restablece, y como resultado, el botón en sí no se muestra y se muestra el botón vacío. El botón de relleno es para vaciar la entrada cuando tiene algún valor.
<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>El siguiente código debería ayudar.
<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>