Quiero tener control total sobre el contenido del elemento <input> .
Con React, puedo hacer eso como:
import { useState } from "react"; function Form() { const [value, setValue] = useState(""); const onSubmit = (event) => { event.preventDefault(); // Do something with `value` }; const onChange = (event) => { const { value } = event.target; // For example, users can type only uppercase letters if (value === value.toUpperCase()) { setValue(value); } }; return ( <form onSubmit={onSubmit}> <input onChange={onChange} value={value} /> <button type="submit">Submit</button> </form> ); } export default Form; En Vue, sin embargo, no puedo controlar <input> como:
<script setup> import { ref } from "vue"; const value = ref(""); const onSubmit = () => { // Do something with `value` }; const onInput = (event) => { // For example, users can type only uppercase letters if (event.target.value === event.target.value.toUpperCase()) { value.value = event.target.value; } }; </script> <template> <form v-on:submit.prevent="onSubmit"> <input v-on:input="onInput" v-bind:value="value" /> <button type="submit">Submit</button> </form> </template> Parece que Vue no controla el atributo de value del elemento <input> y la referencia de value de Vue difiere del value en DOM.
¿Cómo puedo hacer lo mismo que React en Vue? Gracias de antemano.
Si desea que el contenido del elemento de input solo se actualice en una condición específica.
Una solución es en el evento de input , debe restablecer el valor del elemento de input con el valor de ref , si la condición no coincide.
Ex:
<script setup> import { ref } from 'vue' const inputValue = ref('') const onSubmit = () => { console.log(inputValue.value) // Do something with `value` } const onInput = (event) => { // For example, users can type only uppercase letters const value = event.target.value if (value === value.toUpperCase()) { inputValue.value = value } else { event.target.value = inputValue.value } } </script> <template> <form v-on:submit.prevent="onSubmit"> <input @input="onInput" :value="inputValue" /> <button type="submit">Submit</button> </form> </template>Este es un ejemplo de código en vivo de lo que está buscando.
https://stackblitz.com/edit/vue3-script-setup-with-vite-ze8fvb?file=src/App.vue