從 VueJs 中以編程方式添加的元素檢查子字符串

Question

我有一個表單，可以在單擊按鈕時添加新行。 新行必須獨立檢查邏輯。 在這種情況下，它會檢查條形碼的前 2 位數字並將其與數據集相關聯，以查看它是否匹配並返回適當的值或“未找到任何內容”。 我似乎無法理解這一點。 首先，它根本不是真正的評估。 它只給我“找不到代理機構”，其次，它對所有領域都這樣做（因為它們在新行添加上都有相同的 v-model）。 我怎樣才能做到這一點，以便它能夠正確且相互獨立地進行評估？

這是我的模板和腳本中的相關代碼

<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();
  } 
}

這是一個代碼筆給你。

Answer 1

這有幾個問題。 首先，您在barcodefield數據對象中有一個拼寫錯誤。 你有“明星”而不是“開始”。

其次，在showAgency方法中，您正在引用this.barcodefield屬性，但該屬性不存在。 您可以做的是將條碼字段的索引傳遞給 showAgencyName 方法，並在該方法中使用該索引從條碼字段數組中獲取所需的條碼barcodefields 。

在你的 html 中：

<q-input outlined square dense maxlength="24"
v-model.trim="barcodefield.end" @blur="showAgencyName(index)" ref="bcentry"></q-input>

和 showAgencyName 方法：

showAgencyName(index) {
    const barcodefield = this.barcodefields[index]
    var str = barcodefield.end;
    var res = str.substring(0, 2);

    if (this.barcodeprefixes[res] == undefined) {
        this.agencyName = "Agency not found";
    } else {
        this.agencyName = this.barcodeprefixes[res];
    }
}

更新：還有一個我一開始沒有注意到的問題。 每次添加新的agencyName被覆蓋，因為它是一種全局值。 我用我能想到的最簡單的解決方案更新 Codepen。 從showAgencyName返回代理的名稱，並使用它在界面上打印它。 對此有許多可能的其他解決方案（例如，在數組中添加條形碼字段對象的名稱）。

這是一個有效的Codepen

Answer 2

• 首先，您應該更改名為“barcodefield”的 for 循環變量的名稱，因為您的數據結構中已經有了一個
• 其次，我會親自使用函數{{ getAgencyName(b) }}而不是{{ agencyName }}否則所有行都將具有相同的機構名稱

Answer 3

這里發生了幾件事：

首先，正如 Simon 所指出的，不要將循環變量命名為與頂級數據元素相同的東西。 而不是<div v-for="(barcodefield, index) in barcodefields" :key="index"> ，做<div v-for="(item, index) in barcodefields" :key="index"> 。 然后更新所有barcodefield.start和barcodfield.end以引用item.start和item.end 。

然后，您需要讓每個項目都有自己的機構agencyName ，而不是所有項目都引用相同的數據。

將showAgencyName更新為：

showAgencyName(item) {
    var str = item.end;
    var res = str.substring(0, 2);
    if (this.barcodeprefixes[res] == undefined) {
        item.agencyName = "Agency not found";
    } else {
        item.agencyName = this.barcodeprefixes[res];
    }
},

然后你可以這樣稱呼它： @blur="showAgencyName(item)"

並在 html 中使用它，如下所示：

<div v-if="item.agencyName" style="min-height: 40px">
    {{ item.agencyName }}
</div>

（你可以去掉數據對象中的頂級barcodefield ，因為它不再使用了。）

在這里小提琴： https : //jsfiddle.net/ebbishop/7r1pqx9f/