Autofill input fields

Question

I need following to work. I have an input field (in my Code number1) and I need to autofill (not autocomplete) the other input fields (in my Code autofill1 + autofill2).

I'm working with Bootstrap Vue (Bootstrap 4.6 and Vue.js 2).

Here is my code:

<template>
  <div class="m-2 mt-3">
    <table class="table table-striped mt-2">
      <tbody>
        <h5 class="ml-1">Informations</h5>
        <tr>
          <div class="row">
            <div class="col-md-6 m-1">
              <div class="mt-2">number1</div>
              <b-form-input class="form-control" placeholder="1234567" id="number1" />
            </div>
          </div>
          <div class="row">
            <div class="col-md-5 ml-1 mr-1">
              <div class="mt-2">autofill1</div>
              <b-form-select id="autofill1"> </b-form-select>
            </div>

            <div class="col-md-5 ml-1 mr-1">
              <div class="mt-2">autofill2</div>
              <b-form-select id="autofill2"> </b-form-select>
            </div>
            <div class="row">
            <div class="col-md-3 mt-2 ml-1">
              <b-button variant="success" type="submit"><b-icon icon="check-circle-fill"></b-icon> Save Changes</b-button>
            </div>
            </div>
          </div>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
  };
</script>

<style scoped>
</style>

So my goal is to load some data (first guess was an json file) into my script and after I write a matching number (also possible that its a text) in input field number1 the other two fields will be autofilled.

Thanks in advance for helping me out!

Structure json data:

[
  { "number": 1234567, "autofill1": "Hello", "autofill2": "Goodbye" },
  { "number": 9876543, "autofill1": "Ciao", "autofill2": "Arrivederci" },
  { "number": 1346795, "autofill1": "Hallo", "autofill2": "Tschuess" }
]

Answer 1

Something like this would work: Example

<template>
  <div>
    <input type="number" placeholder="1234567" v-model.number="number1" />
    <input type="text" :value="getAutofill.autofill1" />
    <input type="text" :value="getAutofill.autofill2" />
  </div>
</template>

<script>
export default {
    computed: {
      getAutofill(){
        if (!this.data.find(item => item.number == this.number1)) return ["",""]
        return this.data.find(item => item.number == this.number1)
      }
    },
    data() {
      return {
        number1: undefined,
        data: [
          { "number": 1234567, "autofill1": "Hello", "autofill2": "Goodbye" },
          { "number": 9876543, "autofill1": "Ciao", "autofill2": "Arrivederci" },
          { "number": 1346795, "autofill1": "Hallo", "autofill2": "Tschuess" }
        ]
      }
    }
};
</script>