programing

네트워크에서 가져온 개체에 v-bind:value 또는 v-model을 사용할 수 있는가?

prostudy 2022. 5. 14. 22:29
반응형

네트워크에서 가져온 개체에 v-bind:value 또는 v-model을 사용할 수 있는가?

하고 싶다.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의 분야에 대한 정의 없이objectvue app data?
필자에게 이것이 필요한 주된 이유는 필드의 수가 많고, 필드의 모든 필드가 존재하는지 확신할 수 없었기 때문이다.obj. (좋다)field99아래 예에서)
사물의 모든 분야를 정의해야 할 것 같아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' />

내가 어떻게 이 목표를 달성할 수 있을까?

remote api에서 데이터를 가져온 후 데이터를 설정하고, 를 사용하여 응답하십시오.$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' />

참조URL: https://stackoverflow.com/questions/52565292/is-it-possible-to-use-v-bindvalue-or-v-model-for-the-object-gotten-from-the-net

반응형