Javascript 如何为vue页面中的每个b字段声明数据属性实例？

我知道我以前问过这个问题，但我无法回答上一个问题。正如标题所述，如何为vue js中的每个b字段创建单独的数据属性实例。我试图只对输入值无效的b字段突出显示（是危险的）

注意：代码中的“highlight”是数据属性（见下面代码末尾）

我的页面-

<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>

---

当前，如果我使用无效输入从上述任何字段中拉出（@blur），则它将高亮显示（危险）这是因为数据属性“highlight”是所有b字段中的一个共享变量。请帮助我如何正确执行上述输入验证。此外，我还需要一种机制，以防止在提供无效输入时提交页面。我是目前正在使用另一个名为flag的数据属性执行此操作，其中if flag==1，然后从submit form函数返回false。请对此提供帮助。

您好Vignesh Swaminathan，我不熟悉buefy，但是，是否尝试使用v-for根据数据属性中的数组呈现b字段组件？这样，阵列中的每个对象都有自己的hightlight值。它还为您提供了编写更少标记和编写更多声明性代码的优势。

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'
                }
             }
            }
         }