BootstrapVue输入数字匹配JSON自动填充及校验功能失效求助

核心错误点 #

• 长度计算逻辑错误：Object.keys(inputNumber).length是用于统计对象键数量的API，输入的数字/字符串用这个方法统计长度永远返回0，导致3位长度的判断永远不触发
• 遍历逻辑错误：用forEach遍历匹配列表时，匹配到目标项后仍会遍历剩余项，未匹配的项就会触发Not in file打印
• 赋值逻辑错误：匹配到数据后仅修改了局部变量inputNumber，没有修改当前绑定的表单元素对象，自动填充不会生效
• 传参缺失：查询方法只传入了输入的数字，没有传入当前对应的表单元素对象，无法定位要填充的输入组
• 缺少错误提示相关的状态绑定

修复后完整代码 #

<template>
<div>
  <div class='inputArea mt-2' v-for='(element, index) in inputs' :key='index'>
    <b-button v-b-toggle="'newElement'+index" variant='secondary btn-block'>Element {{index+1}}</b-button>

    <b-collapse :id="'newElement'+index">
      <div class='m-2 mt-3'>
        <table class='table table-striped mt-2'>
          <tbody>
            <tr>
              <div class='row'>
                <div class='col-md-6 m-1'>
                  <div class='mt-2'>Input Number</div>
                  <b-form-input 
                    v-model="element.Number" 
                    @input="searchelementInformations(element)"
                    :state="element.numberValid"
                  ></b-form-input>
                  <div class="invalid-feedback">false number</div>
                </div>
              </div>
              <div class='row'>
                <div class='col-md-5 ml-1 mr-1'>
                  <div class='mt-2'>Autofill 1</div>
                  <b-form-input :value="element.Autofill1" ></b-form-input>
                </div>
                <div class='col-md-5 ml-1 mr-1'>
                  <div class='mt-2'>Autofill 2</div>
                  <b-form-input :value="element.Autofill2"></b-form-input>
                </div>

              </div>
            </tr>
          </tbody>
        </table>
      </div>
    </b-collapse>
    </div>

    <div class='mt-4 mb-5 ml-3 mr-3'>
      <b-button @click='addelement' variant='block' type='button'>Add Element</b-button>
    </div>

  </div>
</template>


<script>

export default {
  methods: {
    addelement() {
      this.inputs.push ({
        Number: '',
        Autofill1: '',
        Autofill2: '',
        numberValid: null
      });
    }, 

    searchelementInformations(currentElement) {
      const inputNumber = currentElement.Number
      // 先重置状态
      currentElement.numberValid = null
      currentElement.Autofill1 = ''
      currentElement.Autofill2 = ''

      // 校验长度：转成字符串判断长度是否为3
      const numStr = String(inputNumber).trim()
      if (numStr.length !== 3) {
        currentElement.numberValid = false
        console.log("Not correct length")
        return
      }

      // 查找匹配项
      const matchItem = this.jsonAutofill.find(item => +item.Number === +inputNumber)
      if (matchItem) {
        currentElement.numberValid = true
        currentElement.Autofill1 = matchItem.Autofill1
        currentElement.Autofill2 = matchItem.Autofill2
      } else {
        currentElement.numberValid = false
        console.log("Not in file")
      }
    }, 
  },

  data() {
      return {
        inputs:[{
          Number: '',
          Autofill1: '',
          Autofill2: '',
          numberValid: null
        }],
        Artikelnummer: [],
        jsonAutofill: [
          { "Number": 123, "Autofill1": "Test1", "Autofill2": "Hello"},
          { "Number": 321, "Autofill1": "Test2", "Autofill2": "Goodbye"},
        ],
      }
  }
};
</script>


<style scoped>
</style>

内容的提问来源于stack exchange，提问作者patrick96