I am trying to make VueApp use either v-model or v-bind:value for the object received from the network API.
For instance, if the Vue app fetches an object from the API in this format:
{
field1:value1, field2:value2, ......... , field100:value100
}
The number of fields is substantial.
In order to use v-model='obj.field', I believe the Vue app needs to define the data like this.
new Vue({
el:"#mainapp",
data:{
obj:{field:''}
}
...
}
Is it possible to utilize v-model for the object retrieved from the API without explicitly defining each field of the object in the vue app data?
The main issue is that the number of fields is large and there is no guarantee that all fields exist in the obj.
(such as field99 in the example below)
I find it cumbersome to have to define all fields of the object, obj, in the vue app data.
This is how I envision it working.
//script
new Vue({
el:"#mainapp",
data:{
obj:{}
},
created(){
this.$http.get('urltoget_object')
.then((res)=>{
this.obj = res.body.data; //this returns object by data field.
}, (err)=>{});
}
...
}
<input type='text' v-model= 'obj.field100' />
<input type='text' v-model= 'obj.field99.netstedfield' />
How can I accomplish this objective?