Soy nuevo en Vue. Estoy tratando de crear una entrada de crecimiento automático. Descubrí que no hay forma de crear <input> real que se ajuste a su contenido (donde puedo usar v-model para cambiar el valor). Así que creé un <span> que actúa como una entrada. Pero no puedo obtener el valor de entrada después de cambiarlo.

Para resumir la funcionalidad, mi valor de "velocidad" se puede ajustar con los botones + y - (funciona) o escribiendo un nuevo número (no funciona).

Mi código:

 <script setup> import { ref } from 'vue' const speed = ref(20) function minus() { speed.value-- } function plus() { speed.value++ } </script> <template> <h2>Speed:</h2> <button @click="minus">−</button> <span class="input" role="textbox" contenteditable>{{speed}}</span> <button @click="plus">+</button> </template>