0
262
VistasAutocompletar la segunda entrada de texto según la condición del rango al completar la primera entrada usando Nuxt/Vue y Vuetify
Estoy creando un formulario de registro de contratista usando Nuxt & Vuetify.
Tengo un formulario donde está la primera entrada (UNO), el usuario debe ingresar un valor de contrato (por ejemplo: 50 dólares). En la segunda entrada (DOS), autocompletará un valor de cadena según el rango del valor del contrato ubicado. Después de terminar de llenar el formulario, el usuario enviará el formulario.
El pseudocódigo será algo como esto:
Let say the user write "13" on the 1st input, 2nd input will auto display "b2". if ( ONE < 10 ) { TWO = "a1" //2nd input will display a1 } else if ( 10 < ONE < 20) { TWO = "b2" //2nd input will display b2 } else if ( 20 < ONE < 30) { TWO = "c3" //2nd input will display c3 }Esto es lo que he hecho hasta ahora:
plantilla nuxt/vue
<v-col cols="12" sm="6" md="6"> <label style="font-size: 1.5rem;">Estimated Contract Value (RM)</label> <v-text-field v-model="editedItem.EstimatedContractValue" outlined ></v-text-field> </v-col> <v-col cols="12" sm="6" md="6"> <label style="font-size: 1.5rem;">Works Grade</label> <v-text-field v-model="editedItem.WorksGrade" outlined :items="worksgrade" ></v-text-field> </v-col>guion
watch: { "editedItem.EstimatedContractValue"(newVal) { this.worksgrade = []; if (this.EstimatedContractValue < 200000) { // this.editedItem.WorksGrade = "G1"; this.editedItem.worksgrade.push("G1"); } else if (200000 < this.EstimatedContractValue < 500000) { // this.editedItem.WorksGrade = "G2"; this.editedItem.worksgrade.push("G2"); } else if (500000 < this.EstimatedContractValue < 1000000) { // this.editedItem.WorksGrade = "G3"; this.editedItem.worksgrade.push("G3"); } else if (1000000 < this.EstimatedContractValue < 3000000) { // this.editedItem.WorksGrade = "G4"; this.editedItem.worksgrade.push("G4"); } else { alert("oi lebih dah ni!") } } } Actualmente, la segunda entrada no muestra nada después de completar la primera entrada. Estoy usando observadores, pero no estoy seguro de si esa es la forma correcta. ¿Cómo puedo hacer esto con Nuxt y Vuetify? 
1 Respuestas
Responde la pregunta0
Condición If/Else:
Esta no es una forma válida de evaluar menor que/mayor que en la misma condición:
200000 < this.EstimatedContractValue < 500000 Debe estar separado por && y el nombre de la variable debe ser newVal porque así es como definió el valor en el parámetro del observador:
200000 < newVal && newVal < 500000 
Reactividad del objeto editedItem
¿ editedItem es un objeto calculado como en el siguiente ejemplo? Si es así, this.WorksGrade = "G1" funcionará como desee. Si está en los datos y no se calcula, debe establecer el valor con this.$set(this.editedItem, 'WorksGrade', 'G1') . Documentación sobre la reactividad de Vue para objetos
data: () => ({ EstimatedContractValue: null, WorksGrade: null, }), computed: { editedItem() { return { EstimatedContractValue: this.EstimatedContractValue, WorksGrade: this.WorksGrade, } }, }, watch: { EstimatedContractValue(value) { /* your code setting works grade */ } }, En su caso, no recomiendo configurar el segundo valor en el observador porque mientras el usuario escribe el primer valor, el observador ejecutará cada carácter. En su lugar, agregue @blur="updateWorksGrade al primer campo para que el segundo valor se actualice cuando el primer campo pierda el foco.
updateWorksGrade(event) { const contractValue = event.target.value; /* your code setting works grade */ }