使用Nuxt/Vue Vutify填写第一个输入时，根据范围条件自动填充第二个文本输入(&V)

Auto-fill 2nd text input based on range condition when filling the first input using Nuxt/Vue amp; Vuetify(使用Nuxt/Vue Vutify填写第一个输入时，根据范围条件自动填充第二个文本输入(V))

问题描述

我正在使用Nuxt&；Vutify创建承包商注册表。

我有一个表单，其中是第一个输入(一)，用户需要键入合同价值(例如：50美元)。在第二个输入(两个)上，它将根据所定位的合同值的范围自动填充字符串值。填写完表单后，用户将提交表单。

伪代码如下所示：

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
}

这是我到目前为止所做的工作：

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>

脚本

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

目前，在我填满第一个输入后，第二个输入没有显示任何内容。我在使用观察者，但不确定这是不是正确的方式。如何使用Nuxt&；Vutify执行此操作？

推荐答案

IF/ELSE条件：

在相同条件下，这不是计算小于/大于的有效方法：

200000 < this.EstimatedContractValue < 500000

它应该用&&分隔，变量名应该是newVal，因为这是您在Watcher参数中定义值的方式：

200000 < newVal && newVal < 500000

editedItem对象的反应性

data: () => ({
  EstimatedContractValue: null,
  WorksGrade: null,
}),
computed: {
  editedItem() {
    return {
      EstimatedContractValue: this.EstimatedContractValue,
      WorksGrade: this.WorksGrade,
    }
  },
},
watch: {
  EstimatedContractValue(value) {
    /* your code setting works grade */
  }
},

在您的情况下，我不建议在观察器中设置第二个值，因为当用户键入第一个值时，观察器将运行每个字符。而是将@blur="updateWorksGrade添加到第一个字段，以便在第一个字段失去焦点时更新第二个值。

updateWorksGrade(event) {
  const contractValue = event.target.value;
  /* your code setting works grade */
}

这篇关于使用Nuxt/Vue Vutify填写第一个输入时，根据范围条件自动填充第二个文本输入(&V)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！