检查对象大小/ BootstrapVue 的长度

Question

我已经更新了我的代码 - 我认为之前还不够清晰。

我尝试输入我的号码并在其他两个字段中获取我的输入但只有当它正确时，否则我的输入字段应该包含信息“假号码”，但它不起作用..

当我输入 3 个数字并且它们在我的 json 文件中时，它会给出 console.log “不在文件中” - 但它是..

希望现在有人可以帮助我..

<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.Number)"></b-form-input>
                </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 ({
      });
    }, 

    searchelementInformations(inputNumber) {

      var size = Object.keys(inputNumber).length;
      console.log(size);

      this.jsonAutofill.forEach(element => {
        if ((size === 3) && (+element.Number === +inputNumber)) {
          for(const key of Object.keys(element)) {
            inputNumber = element[key];
            console.log(key);
            console.log(inputNumber);
          }
        }
        else if (size !== 3) {
          console.log("Not correct length");
        }
        else if ((size === 3) && (+element.Number !== +inputNumber)){
          console.log("Not in file")
        }
      });       
    }, 
  },

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


<style scoped>
</style>

Answer 1

我会关注反应性数据，like this：

<script>
export default {
  data () {
    return {
      number: 0,
      message: ""
    }
  },
  watch: {
    "number"(){
      if (this.number.length == 5) {
        this.message = "Do this"
      }
      else {
        this.message = "Do that"
      }
    }
  }
}
</script>

<template>
  <input v-model="number">
  <div>{{ message }}</div>
</template>

Answer 2

这就是答案。我需要在我的 Object.keys 中引用“数字”而不是得到长度。

var size = Object.keys(inputNumber.Number).length;
      console.log(size);