Check length of Object size / BootstrapVue-CodePudding

I've updated my code - I think before it was not clear enough.

I try to write in my number and get my input in the other two fields but only when its correct otherwise my input fields should include informatione "false number", but it's not working..

also when I input 3 numbers and they are in my json file it gives console.log "Not in file" - but it is..

Hope now someone can help me out..

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

CodePudding user response：

I would watch for the reactive data, 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>

CodePudding user response：

This is the answer.. I need to reference "Number" in my Object.keys than I will get the length.

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