Javascript 从VueJs中以编程方式添加的元素检查子字符串_Javascript_Vue.js_Vuejs2

Javascript 从VueJs中以编程方式添加的元素检查子字符串

javascript vue.js vuejs2

Javascript 从VueJs中以编程方式添加的元素检查子字符串,javascript,vue.js,vuejs2,Javascript,Vue.js,Vuejs2,我有一个表单，可以在单击按钮时添加新行。新行必须独立检查逻辑。在这种情况下，它检查条形码的前两位数字并将其与数据集关联，以查看其是否匹配并返回适当的值或“未找到任何内容”。我似乎不能把这个弄对。首先，它根本不是真正的评估。它只给我“找不到代理”，其次，它对所有字段都这样做（因为它们在新行add上都有相同的v型）。我如何才能做到这一点，使它能够正确地、独立地进行评估下面是我的模板和脚本中的相关代码 <div id="q-app" class="q-pa-lg"> <div c

我有一个表单，可以在单击按钮时添加新行。新行必须独立检查逻辑。在这种情况下，它检查条形码的前两位数字并将其与数据集关联，以查看其是否匹配并返回适当的值或“未找到任何内容”。我似乎不能把这个弄对。首先，它根本不是真正的评估。它只给我“找不到代理”，其次，它对所有字段都这样做（因为它们在新行add上都有相同的v型）。我如何才能做到这一点，使它能够正确地、独立地进行评估

下面是我的模板和脚本中的相关代码

<div id="q-app" class="q-pa-lg">
 <div class="col-6">
  <div v-for="(barcodefield, index) in barcodefields" :key="index">
   <div class="flex q-pt-lg">
    <div class="row flex-center">
     <div class="col-3">
      <div class="column">
       <div class="row q-pr-lg items-center">
        <label class="text-weight-medium">Starting Roll #:</label>
        <q-input outlined square dense maxlength="24"
         v-model.trim="barcodefield.start" ref="bcentry"></q-input>
       </div>
      </div>
     </div>
     <div class="col-3">
      <div class="column">
       <div class="row q-pr-lg items-center">
        <label class="text-weight-medium">Ending Roll #:</label>
        <q-input outlined square dense maxlength="24"
         v-model.trim="barcodefield.end" @blur="showAgencyName" ref="bcentry"></q-input>
       </div>
      </div>
     </div>
     <div class="col-5">
      <div class="column">
       <label class="text-weight-medium">
        Agency:
       </label>
       <div v-if="agencyName" style="min-height: 40px">
        {{ agencyName }}
       </div>
       <div v-else style="min-height: 40px"></div>
      </div>
     </div>
     <div class="col-1">
      <div class="block float-right">
       <q-btn v-if="index + 1 === barcodefields.length" @click="addLine" icon="add" color="primary" round />
       <q-btn v-else style="min-width: 42px"/>
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>


export default {
  data() {
    return {
        barcodefields: [],
        barcodeprefixes: {
            "10": "Boston",
            "11": "New York",
            "13": "Houston",
            "14": "Connecticut",
            "16": "SIA",
            "17": "Colorado",
            "18": "Chicago",
            "19": "Washington",
        },
        barcodefield: {
          star: "",
          end: ""
        },
        agencyName: "",
    };
  },
  methods: {
    addLine() {
        this.barcodefields.push({
            start: null,
            end: null
        });
    },
    showAgencyName() {
        var str = this.barcodefield.end;
        var res = str.substring(0, 2);
        if (this.barcodeprefixes[res] == undefined) {
            this.agencyName = "Agency not found";
        } else {
            this.agencyName = this.barcodeprefixes[res];
        }
    },
  },
  mounted() {
    this.addLine();
  } 
}


起动辊#：
收尾辊#：
代理机构：
{{agencyName}}
导出默认值{
数据（）{
返回{
条形码字段：[]，
条形码前缀：{
“10”：“波士顿”，
“11”：“纽约”，
“13”：“休斯顿”，
“14”：“康涅狄格州”，
“16”：“SIA”，
“17”：“科罗拉多”，
“18”：“芝加哥”，
“19”：“华盛顿”，
},
条码字段：{
星：“，
"完"
},
机构名称：“，
};
},
方法：{
addLine（）{
这个是.barcodefields.push({
开始：空，
结束：空
});
},
showAgencyName（）{
var str=this.barcodefield.end；
var-res=str.substring（0,2）；
if（this.barcode前缀[res]==未定义）{
this.agencyName=“未找到代理”；
}否则{
this.agencyName=this.barcode前缀[res]；
}
},
},
安装的（）{
this.addLine（）；
} 
}

这是给你的建议。

这有几个问题。首先，您在

条形码字段

数据对象中有一个输入错误。你有“星”而不是“开始”

其次，在

showAgency

方法中，您正在引用

this.barcodefield

属性，但该属性不存在。您可以做的是将条形码字段的索引传递给showAgencyName方法，并在方法内部使用该索引从

条形码字段

数组中获取所需的条形码字段

在html中：

以及showAgencyName方法：

showAgencyName（索引）{
const barcodefield=this.barcodefields[索引]
var str=barcodefield.end；
var-res=str.substring（0,2）；
if（this.barcode前缀[res]==未定义）{
this.agencyName=“未找到代理”；
}否则{
this.agencyName=this.barcode前缀[res]；
}
}

更新：还有一个问题我一开始没有注意到。每次添加新条形码字段时，

agencyName

都会被覆盖，因为它是一种全局值。我用我能想到的最简单的解决方案更新代码笔。从

showAgencyName

返回代理的名称，并使用该名称在界面上打印。有许多其他可能的解决方案（例如在数组中添加barcodefields对象的名称）

这是一个正在运行的