我希望VueApp
对于从v-model
获取的对象使用v-bind:value
或network api
。
例如,Vue app
像这样从api
获取对象
{
field1:value1, field2:value2, ......... , field100:value100
}
字段数很大。
要使用v-model='obj.field'
,我认为Vue app
必须将数据定义如下。
new Vue({
el:"#mainapp",
data:{
obj:{field:''}
}
...
}
我可以将v-model
所获得的对象中的api
用于object
中vue app data
的字段吗?
我需要这样做的主要原因是字段的数量很大,而且我不确定obj
中是否存在所有字段。
(例如以下示例中的field99
)
我认为在obj
中定义对象vue app data
的所有字段都是不好的经验。
我想要的例子。
//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' />
我如何实现这个目标?
答案 0 :(得分:1)
在从远程api获取数据后设置数据,请使用this.$set使其响应。
//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.
this.$set(this,'obj',res.body.data)
}, (err)=>{});
}
...
}
<input v-if="'field100' in obj" type='text' v-model= 'obj.field100' />