Проверка подстроки из программно добавленного элемента в VueJs

Question

У меня есть форма, которая добавляет новую строку при нажатии кнопки. Новая строка должна проверять логи c независимо. В этом случае он разбивает первые 2 цифры штрих-кода и связывает его с набором данных, чтобы посмотреть, соответствует ли он, и возвращает соответствующее значение или «ничего не найдено». Я не могу понять это правильно. Во-первых, это не совсем оценка. Это только дает мне «Агентство не найдено», и, во-вторых, оно делает это для всех полей (потому что у них у всех одна и та же v-модель в новой строке add). Как мне добиться этого, чтобы он правильно и независимо оценивал друг друга?

Вот соответствующий код в моем шаблоне и скрипте

<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

• Сначала вы должны изменить имя переменной для l oop с именем "barcodefield", потому что она уже есть в вашей структуре данных
• Во-вторых, я бы лично использовал функцию {{ getAgencyName(b) }} вместо {{ agencyName }} в противном случае у вас будет одинаковое название агентства для всех строк

Answer 2

Здесь происходит несколько вещей:

Во-первых, как указывает Саймон, не называйте l oop переменные тем же, что и элемент данных верхнего уровня. Вместо <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 в объекте данных, потому что он больше не используется.)

Fiddle здесь: https://jsfiddle.net/ebbishop/7r1pqx9f/

Answer 3

Есть несколько проблем с этим. Во-первых, у вас есть опечатка в объекте данных 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 и используйте его для печати на интерфейсе. Есть много других возможных решений (например, добавьте имя объекта barcodefields в массиве).

Вот рабочий Codepen