vue.js - 是否可以对从网络获取的对象使用 v-bind:value 或 v-model ？

Question

我想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:''}
   }
   ...
}

我可以使用从in字段的无定义中v-model获得的对象吗？ 我需要这个的主要原因是字段数量很大，我不能确定所有字段都存在于. （如下例所示） 我认为定义对象的所有字段, in是不好的体验。apiobjectvue app data
objfield99
objvue 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' />

我怎样才能实现这个目标？

Answer 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' />