0
164
ViewsVUE cambia el valor solo después de hacer clic en enviar
Tengo un código como este. En este código, un usuario quiere cambiar el nombre actual. El nombre actual también se muestra en la parte superior de la página.
// template <div>{{ currentUser.name }}</div> <v-text-field required v-model="currentUser.name" class="mb-3" ></v-text-field> <v-btn>submit</v-btn> //script data() { currentUser: null }, methods: { getUser(id) { //my GET method here }, updateUser() { //my PUT method here } Los datos son de una API. El v-text-field actual se rellena con el nombre actual. En este momento, si cambio el valor en el campo de texto, el valor div también cambia. ¿Cómo hacer que cambie solo cuando el usuario ya ha hecho clic (digamos) en un botón de envío y el proceso tiene éxito?
3 answers
Answer question0
Esto puede funcionar bien
<template> <div> <div>{{ currentUser.name }}</div> <v-text-field required class="mb-3" ref="textField"></v-text-field> <button @click="updateUsername">update user's name</button> </div> </template> <script> export default { data() { return { currentUser: { name: '', }, } }, methods: { updateUsername() { this.currentUser.name = this.$refs.textField.internalValue }, }, } </script> También puede usar un debounce , almacenarlo en otro estado, pero tener que usar $refs está bien aquí.
Además, no soy un usuario de Vuetify, por lo tanto, no estoy seguro de qué se tratan todos esos value , pero en general tiene una buena opción.
0
Agregando a la respuesta de Kissu, si desea cambiar el valor de blur (al hacer clic), debe hacer lo siguiente.
Dado que Vuetify no proporciona un accesorio lazy para permitir solo la actualización del valor en el evento de change , debe hacerlo usted mismo. Use el :value prop y vincúlelo a una propiedad calculada y proporcione un setter getter a la propiedad calculada.
Esto solo activará el cambio en el blur , cuando haga clic fuera de la entrada, o presione Entrar o presione Tabulador.
<template> <div>{{ currentUserName }}</div> <v-text-field required :value="currentUserName" @change="onNameChange" class="mb-3" ></v-text-field> </template> <script> ... methods: { onNameChange(event) { this.currentUserName = event.target.value; } } computed: { currentUserName: { get() { return this.currentUser.name }, set(newName) { this.currentUser.name = newName; } } } ... </script>0
<div>{{ currentUser.name }}</div> <v-text-field required :value="currentUser.name" @input="nameChanged" //here maybe @change="xxx" class="mb-3" ></v-text-field> <v-btn @click="updateUser">submit</v-btn> //script data() { currentUser: null }, methods: { nameChanged(e) { console.log(`e`,e) //The value is based on the printed value this.tempName = e }, updateUser() { this.currentUser.name = this.tempName } }