0
256
ViewsAuto-fill 2nd text input based on range condition when filling the first input using Nuxt/Vue & Vuetify
I am building a contractor registration form using Nuxt & Vuetify.
I have a form where is the 1st input (ONE), the user needs to key in a contract value (e.g: 50 dollars). On the 2nd input (TWO), it will auto-fill a string value depending on the range of the contract value located. After finish fill the form, user will submit the form.
The pseudocode will be something like this:
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
}
This is what I've done so far:
nuxt/vue template
<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>
script
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!")
}
}
}
Currently 2nd input doesn't display anything after I filled the 1st input. I'm using watchers but not sure if that's the right way. How can I do this with Nuxt & Vuetify?
1 answers
Answer question0
If/Else condition:
This is not valid way to evaluate less than/greater than in the same condition:
200000 < this.EstimatedContractValue < 500000
It should be separated by && and the variable name should be newVal because that's how you defined the value in the watcher parameter:
200000 < newVal && newVal < 500000
Reactivity of editedItem object
Is editedItem a computed object as in the below example? If it is, then this.WorksGrade = "G1" will work as you want. If it's in data and not computed, then you need to set the value with this.$set(this.editedItem, 'WorksGrade', 'G1'). Documentation on Vue reactivity for objects
data: () => ({
EstimatedContractValue: null,
WorksGrade: null,
}),
computed: {
editedItem() {
return {
EstimatedContractValue: this.EstimatedContractValue,
WorksGrade: this.WorksGrade,
}
},
},
watch: {
EstimatedContractValue(value) {
/* your code setting works grade */
}
},In your case I don't recommend setting the second value in the watcher because as the user is typing the first value, the watcher will run each character. Instead add @blur="updateWorksGrade to the first field so the second value is updated when the first field loses focus.
updateWorksGrade(event) {
const contractValue = event.target.value;
/* your code setting works grade */
}