I have an asynchronous function that returns a Fetch Request:
async fetchDataByCodOS(codOS){
const res = await fetch(
'http://localhost:5000/cods/'+codOS,
{
method:"GET"
}
).then(res => res.json())
return res
}
I am able to print a Promise Object, now I need to iterate through it. By using @input:change() in v-text-field
change(){
this.fetchDataByCodOS(this.codOS).then( result => console.log(result) ); // Returning Object inside Array
}
I want to just grab the JSON Object:
change(){
this.fetchDataByCodOS(this.codOS).then( result => result.forEach(
el => console.log(el)
));
}
Now I can access the elements inside the object, but I'm unable to fill my form with it, for example using v-model:
<v-text-field label="ID" v-model="ID" disabled> </v-text-field>
I thought the right way to fill it was to create an empty object called ob in data which I could use inside forEach, but I didn't do that.
export default {
data(){
return {
ob: {
//values here
}
}
}
}
Can you suggest a better practice or way to make this work?
Updating
VUE FORM:
<v-text-field
label="Id. OS"
v-model="codOS"
@input="change()"
>
</v-text-field>
</v-col>
<v-col cols="12" md="9">
<v-text-field label="ID" disabled> </v-text-field>
</v-col>
<v-col cols="12" md="4">
<v-text-field label="NAME" disabled> </v-text-field>
</v-col>
<v-col cols="12" md="8">
<v-text-field label="CITY" disabled> </v-text-field>
</v-col>
<v-col cols="12" md="9">
<v-text-field label="FONE" disabled> </v-text-field>
</v-col>
<script>
export default {
data (){
return{
codOS: '',
}
},
methods:{
autocomplete(){
if(this.codOS.length == '5'){
const data = this.fetchDataByCodOS(this.codOS);
//data.then(r => console.log(r)); // Here I just grab the data object, but I'm trying to remove the array, so.
data.then(r => r.forEach(el =>
console.log(el)
//I think her I want to take el.nameObject and assign to v-model
))
}
},
// Change my function according MAX
async fetchDataByCodOS(codOS){
const res = await fetch(
'http://localhost:5000/cods/'+codOS,
{
method:"GET"
}
)
const json = await res.json()
return json
}
}
}
</script>
What console is showing:
Promise {<pending>}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: Array(1)
0: {ID: "1", NAME: "EDDY", CITY: "NEW YORK", FONE: "6456465465456"}
length: 1
__proto__: Array(0)
Add.vue?5f53:71
{ID: "1", NAME: "EDDY", CITY: "NEW YORK", FONE: "6456465465456"}
ID: "1"
NAME: "EDDY"
CITY: "NEW YORK"
FONE: "6456465465456"
__proto__: Object