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

我可以将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' />

我如何实现这个目标？

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

是否可以对从网络中获取的对象使用v-bind：value或v-model？

1 个答案: