Second input keep showing the same input value eventhough the value in the first input is inserted d-CodePudding

This is a follow-up question from the question that I've asked before:

Autofill the 2nd input after the 1st input value is filled based on the if/else range condition. Below is the answer is given by @Muge which I follow to solve it.

What could be wrong with my code?

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
        @blur="updateWorksGrade"
    ></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
        readonly
        :items="worksgrade"
    ></v-text-field>
</v-col>

vue script

data: () => ({
    editedItem: {
        EstimatedContractValue: "",
        WorksGrade: "",
    },
    worksgrade: [],
}),

methods: {
    updateWorksGrade() {
        this.worksgrade = [];
        let x = [];
        if ( x < 200000) {
            this.editedItem.WorksGrade = "G1";
        } else if ( x > 200000 && x <= 500000) {
            this.editedItem.WorksGrade = "G2";
        } else if ( x > 500000 && x <= 1000000) {
            this.editedItem.WorksGrade = "G3";
        } else if ( x > 1000000 && x <= 3000000) {
            this.editedItem.WorksGrade = "G4";
        } else {
            alert("oi lebih dah ni!")
        }
    },
},

CodePudding user response：

The value of x is always less than 200000, thus every time the function is call, the x val is same

CodePudding user response：

Found the issue. Still want to post it in case have the same problem with me in the future.

I changed let x = []; to let x = this.editedItem.EstimatedContractValue.

Now, whatever number value I put on the first input, the second input will only display the value on the condition that I set.

data: () => ({
    editedItem: {
        EstimatedContractValue: "",
        WorksGrade: "",
    },
    worksgrade: [],
}),

methods: {
    updateWorksGrade() {
        this.worksgrade = [];
        let x = this.editedItem.EstimatedContractValue;
        if ( x < 200000) {
            this.editedItem.WorksGrade = "G1";
        } else if ( x > 200000 && x <= 500000) {
            this.editedItem.WorksGrade = "G2";
        } else if ( x > 500000 && x <= 1000000) {
            this.editedItem.WorksGrade = "G3";
        } else if ( x > 1000000 && x <= 3000000) {
            this.editedItem.WorksGrade = "G4";
        } else {
            alert("oi lebih dah ni!")
        }
    },
},