检查对象大小/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);

检查对象大小/BootstrapVue 的长度

Check length of Object size / BootstrapVue

javascript

size

vue.js

vuejs2

bootstrap-vue