获取动态 v 模型以与数据进行比较 - VueJS 和 Vuelidate

Question

我正在制作一个显示 3 个元素的简单表单

起始条码字段
结束条码字段
标签字段

用户在每个字段中输入 2 个条形码。将 barcodeEnd 值的前 2 位数字与 allBarcodePrefixes 数据进行比较以查看是否匹配，如果不匹配则打印相应的机构名称或 "Agency Not Found"。如果没有匹配项，表单将停在那里（用户必须修复条形码条目），但如果找到匹配项，它将显示一个新行，其中包含一组新生成的字段和 v-models

在我将 v-models 动态化之前，它工作正常，因此我可以独立操作每个条目以进行验证和值

问题发生了两件奇怪的事情，我需要帮助。

当我模糊并进入下一个输入字段时，起始条码字段被清除。然后当我在那里输入一些东西时，它又回来了！我也有一个清晰的控制台，所以我不知道发生了什么。
showAgencyName() 方法应该是获取v-model 并将其与数据进行比较以获取机构名称。但是我的 v-model 是动态的并且是字符串文字。我不确定如何提取这个值

我在 codepen 中提供了代码，供您查看并了解我的意思。我将 onAddBarcodes 函数放在失败行中，以便您可以看到它正确验证（该部分有效）。最终，该行将被删除，因为它只应在首先为代理商验证后才验证 minLength 和 maxLength。

    <div id="q-app">
        <div class="q-pa-md">
          <div>
            <div v-for="(barcode, index) in barcodes" :key="index">
              <div class="full-width row no-wrap justify-start items-center q-pt-lg">
                <div class="col-3">
                  <label>Starting Roll #:</label>
                  <q-input outlined square dense v-model="$v[`barcodeStart${index}`].$model"></q-input>

                  <div class="error-msg">
                    <div v-if="!$v[`barcodeStart${index}`].maxLength || !$v[`barcodeStart${index}`].minLength">
                      <span> Must be exactly 9 characters. </span>
                    </div>
                  </div>
                </div>

                <div class="col-3">
                  <label>Ending Roll #:</label>
                  <q-input outlined square dense v-model="$v[`barcodeEnd${index}`].$model" @change="showAgencyName(barcode)"></q-input>
                  <div class="error-msg">
                    <div v-if="!$v[`barcodeEnd${index}`].maxLength || !$v[`barcodeEnd${index}`].minLength">
                      <span> Must be exactly 9 characters. </span>
                    </div>
                  </div>
                </div>

                <div class="col-3">
                  <label>Agency:</label>
                  <div v-if="barcode.agencyName">
                    {{ barcode.agencyName }}
                  </div>
                  <div v-else></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>


      Vue.use(window.vuelidate.default)
      const { required, minLength, maxLength } = window.validators

      new Vue({
        el: '#q-app',
        data () {
          return {
            barcodes: [
              {
                barcodeStart: "",
                barcodeEnd: "",
                agencyName: ""
              }
            ],
            newPackage: "",
            reset: true,
            allBarcodePrefixes: {
              "10": "Boston",
              "11": "New York",
              "13": "Houston",
              "14": "Connecticut",
              "16": "SIA",
              "17": "Colorado",
              "18": "Chicago"
            }
          }
        },
        validations() {
          const rules = {};
          this.barcodes.forEach((barcode, index) => {
            rules[`barcodeStart${index}`] = {
                minLength: minLength(9),
                maxLength: maxLength(9)
            };
          });

          this.barcodes.forEach((barcode, index) => {
            rules[`barcodeEnd${index}`] = {
                minLength: minLength(9),
                maxLength: maxLength(9)
            };
          });
          return rules;
        },
        methods: {
          onAddBarcodes() {
            // creating a new line when requested on blur of barcodeEnd
            const newBarcode = {
              barcodeStart: "",
              barcodeEnd: "",
              agencyName: ""
            };
            this.barcodes.push(newBarcode);
          },

          showAgencyName(barcode) {
            var str = barcode.barcodeEnd; // I need to pull the v-model value
            var res = str.substring(0, 2); //get first 2 char of v-model
            if (this.allBarcodePrefixes[res] == undefined) {
              //compare it to data
              barcode.agencyName = "Agency not found"; //pass this msg if not matched
              this.onAddBarcodes(); //adding it to the fail just for testing
            } else {
              barcode.agencyName = this.allBarcodePrefixes[res]; //pass this if matched
              this.onAddBarcodes(); //bring up a new line
            }
          },
        }
      })

提前致谢！

Answer 1

您可以做的是将 v-model 设置为 v-for 循环中的对象。所以它看起来像这样。

<q-input outlined square dense v-model="barcode.barcodeStart"></q-input>

和

<q-input outlined square dense v-model="barcode.barcodeEnd"></q-input>

他们通过这种方式更新条形码对象，由于它是可观察的，您的 showAgencyName 函数可以保持原样，其中的条形码对象将被更新。

编辑

当您调用 onchange 事件时，您可以通过索引

@change="showAgencyName(barcode, index)"

然后在您的 showAgencyName 函数中，您可以使用 this.$v 访问验证。

为确保规则已通过，您需要更新 $model。像这样

 this.$v[`barcodeStart${index}`].$model = barcode.barcodeStart
this.$v[`barcodeEnd${index}`].$model = barcode.barcodeEnd

// Check for errors
if (this.$v[`barcodeEnd${index}`].$error) {
   return
}

获取动态 v 模型以与数据进行比较 - VueJS 和 Vuelidate

Getting a dynamic v-model to compare to data - VueJS and Vuelidate

javascript

vue.js

vuelidate