即使每次插入第一个输入的值不同,第二个输入仍显示相同的输入值

2022-03-01 00:00:00 javascript vue.js nuxt.js vuetify.js

这是我之前提出的问题的后续问题:

根据IF/ELSE范围条件填充第一个输入值后自动填充第二个输入。下面是@Muge给出的答案,我跟随它来解决。

https://stackoverflow.com/a/70433191/16136444

但是我遇到了一个问题,第二个输入仍然显示相同的输入值,即使第一个输入中的值每次插入的方式都不同。无论我在第一个输入中输入什么数值,它都会始终给出";g1";的值。

我的代码可能有什么问题?

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
        @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脚本

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!")
        }
    },
},


解决方案

找到问题。我还是想把它贴出来,以防以后和我有同样的问题。

我将let x = [];更改为let x = this.editedItem.EstimatedContractValue

现在,无论我在第一个输入上设置什么数值,第二个输入都将仅在我设置的条件下显示值。

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!")
        }
    },
},

相关文章