Vue - проблема с реквизитом, заполненным с помощью запроса axios - PullRequest
Новая
       15

Vue - проблема с реквизитом, заполненным с помощью запроса axios

0 голосов
/ 02 июля 2019

У меня есть 3 компонента vue List, Car, AddNew

List.vue является родительским компонентом и имеет 2 таких компонента: 

<add-new :cars-models="carModels"></add-new>                

<car
 v-for="(car, index) in items"              
:key="car.id" 
:data="car" 
:car-models="carModels" 
>                   
</car>

позжеимеет это: 

data(){

   return{
     items:'',
     carModels:''     
  }

}
,
created(){
     axios.get('car-models')
         .then(({data})=>{                              
            this.carModels= data;                           
        }); 

      axios.get('cars')
         .then(({data})=>{                  
            this.items = data;  
         });                    
}

В addNew.vue У меня есть это: 

props: ['carModels'],
data(){
   return {
      models:''
   }
},
watch:{

        carModels(){
            this.models= this.carModels;
        }

    }

Мне пришлось использовать наблюдателя, потому что carModels заполняется в родительском компонентеЗдесь все в порядке, но в Car.vue 

props: ['carModels'],
data(){
   return {
      models:''
   }
},
watch:{

        carModels(){
            this.models= this.carModels;
        }

    }

Как вы можете видеть, это то же самое, но this.models нетзаполнен опорой carModels, несмотря на то, что реквизит заполнен !.Я не знаю, что происходит.Спасибо

1 Ответ

1 голос
/ 02 июля 2019

Я думаю, что это проблема времени.Наблюдатель carModels не запускается, потому что значение carModels существует с момента создания компонента.Что вы можете сделать, это изменить данные так, чтобы они выглядели так: 

 return {
      models:this.carModels
   }

таким образом, данные реквизита сначала копируются, а затем обновляются наблюдателем при каждом обновлении реквизита 

props: ['carModels'],
data(){
   return {
      models:this.carModels
   }
},
watch:{    
        carModels(){
            this.models= this.carModels;
        }    
    }
...