在Vue JS中输入预先文本字段验证无法正常工作？

Question

基本上，我试图阻止用户在数组中不存在的文本字段中输入任何自由文本。此验证是在b字段的制表符（@blur）执行的。

通过@blur执行的验证功能

onTabOut: function(mapping,label,data,ref,index){
                this.submitError = '';
                this.flag=0;
                console.log('data is'+data)
                console.log('ref is'+ref)
                console.log('index is'+index)
           if((typeof ref!=='undefined') && (typeof index!=='undefined'))
        {
             if(! (/^\s*$/.test(this.objectData[ref][index][mapping]) || typeof(this.objectData[ref][index][mapping])=='undefined') )
             {
                if(data.length)
                {
                   data.forEach(item => {
                     if((item.id)===(this.objectData[ref][index][mapping]))
                     {
                       this.flag=2
                       this.highlight=''
                     }
                    });
                    if(this.flag!==2)
                    {
                      this.submitError = 'Please enter a valid value for ' + label
                      this.flag=1
                      this.highlight='is-danger'
                    }
                }
                else
                {
                   this.submitError ='Please enter a valid value for ' + label
                   this.flag=1
                   this.highlight='is-danger'
                }
             }
            }
         }

这里this.highlight是如果给定无效输入（即在数组中找不到匹配项）时我要为其分配“ is-danger”的数据属性。这里的问题是因为我有多个b字段（文本字段） ）使用：type =“ highlight”。因此，如果输入的内容无效，则我页面中使用的所有3个b字段（文本字段）都会同时突出显示。（它应仅突出显示包含无效字段的字段输入已输入）。

我的Vue页面

<template>
  <b-field label="Action" :type="highlight">
                <b-autocomplete
                  :value="props.row.action"
                  :data="dataAction"
                  placeholder="select an action..."
                  field="id"
                  @blur="onTabOut('action','Action',dataAction,'records',props.index)"
                  :loading="isFetching"
                  @typing="getAsyncDataAction"
                  @input="(newValue) => {updateRowValue('records', props.index, 'action', newValue); props.row.action = newValue}"
                >
                  <template slot-scope="props">
                    <div class="container">
                      <p>
                        <b>ID:</b>
                        {{props.option.id}}
                      </p>
                      <p>
                        <b>Description:</b>
                        {{props.option.description}}
                      </p>
                    </div>
                  </template>
                </b-autocomplete>
              </b-field>         
              <b-field label="Action Reason" :type="highlight">
                <b-autocomplete
                  :value="props.row.actionReason"
                  :data="dataActionReason"
                  placeholder="select an action reason..."
                  field="id"
                  @blur="onTabOut('actionReason','Action Reason',dataActionReason,'records',props.index)"
                  :loading="isFetching"
                  @typing="getAsyncDataActionReason"
                  @input="(newValue) => {updateRowValue('records', props.index, 'actionReason', newValue); props.row.actionReason = newValue}"
                >
                  <template slot-scope="props">
                    <div class="container">
                      <p>
                        <b>ID:</b>
                        {{props.option.id}}
                      </p>
                      <p>
                        <b>Description:</b>
                        {{props.option.description}}
                      </p>
                    </div>
                  </template>
                </b-autocomplete>
              </b-field>         

              <b-field label="Business Unit" :type="highlight">
                <b-autocomplete
                  :data="dataBusinessUnit"
                  placeholder="select a business unit..."
                  field="id"
                   @blur="onTabOut('businessUnit','Business Unit',dataBusinessUnit,'records',props.index)"
                  :loading="isFetching"
                  :value="props.row.businessUnit"
                  @typing="getAsyncDataBusinessUnit"
                  @input="(newValue) => {updateRowValue('records', props.index, 'businessUnit', newValue)}"              
                >
                  <template slot-scope="props">
                    <div class="container">
                      <p>
                        <b>ID:</b>
                        {{props.option.id}}
                      </p>
                      <p>
                        <b>Description:</b>
                        {{props.option.description}}
                      </p>
                    </div>
                  </template>
                  <template slot="empty">No results found</template>                
                </b-autocomplete>
              </b-field>
</template>          


<script>
import { viewMixin } from "../viewMixin.js";
import debounce from "lodash/debounce";
import api from "../store/api";
const ViewName = "JobDetail";
export default {
  name: "JobDetail",
  mixins: [viewMixin(ViewName)],  
  data: function ()  {
    return {
      dataDepartment: [],
      dataBusinessUnit: [],      
      dataAction: [],
      dataActionReason: [],
      dataGrade: [],
      dataJobCode: [],
      dataLocation: [],
      dataPosition: [],
      dataCompRate: [],
      firstName:'',
      lastName:'',
      selected: null,
      isFetching: false,
      results: [],
      dataManager: [],
       highlight:'', //used for highlighting field
       flag:0    // will be set to 1 if b-field has invalid input.  
    };
  },

</script>

那我该如何解决这个问题？另外，如果在任何字段中输入了无效的输入，我如何防止提交页面？我目前正在尝试使用另一个称为flag的数据属性来执行此操作，如果flag == 1，则从提交表单函数返回false，这样就不会进一步处理，但是显然这是无效的方法，因为flag变量也是数据属性，就像所有文本字段之间的共享变量一样。因此请帮助并解释如何正确执行此验证。