Autofill input fields - vue.js

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>

Answer 2

you need to add some things to the data and than watch for the variable number1 to change...
<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" v-model="number1" />
</div>
</div>
<div class="row">
<div class="col-md-5 ml-1 mr-1">
<div class="mt-2">autofill1</div>
<b-form-input class="form-control" id="autofill1" v-model="autofill1" />
</div>
<div class="col-md-5 ml-1 mr-1">
<div class="mt-2">autofill2</div>
<b-form-input class="form-control" id="autofill2" v-model="autofill2" />
</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 {
data(){
return {
number1: "",
autofill1: "",
autofill2: "",
jsonDATA: {...}
}
},
methods: {
findData(key) {
for(let i=0; i < this.jsonDATA.length; i++){
if(this.jsonDATA[i]['number'] === key) return element[i]
}
// add somthing when no data in array...
}
},
watch: {
number1(){
try {
let tmp = this.findData(this.number1)
this.autofill1 = tmp['autofill1']
this.autofill2 = tmp['autofill2']
}
}
}
};
</script>
<style scoped>
</style>
I havent tested this but this should work... This is not complete, you need to add some behaviour what to do when no data is found...