即使每次插入第一个输入的值不同，第二个输入仍显示相同的输入值-前端问题

Second input keep showing the same input value eventhough the value in the first input is inserted differently everytime(即使每次插入第一个输入的值不同，第二个输入仍显示相同的输入值)

本文介绍了即使每次插入第一个输入的值不同，第二个输入仍显示相同的输入值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

这篇关于即使每次插入第一个输入的值不同，第二个输入仍显示相同的输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！