Vue-使用axios请求填充道具的问题

Question

我有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;
        }

    }

如您所见，它是相同的，但是尽管prop被填充，但this.models并没有填充carModel。 我不知道发生了什么 谢谢

Answer 1

我的猜测是这是一个时间问题。 观察者carModels不会被触发，因为自组件创建以来，carModels的值就在那里。 您可以做的就是修改数据，使其看起来像这样：

 return {
      models:this.carModels
   }

这样，首先复制道具数据，然后在每次更新道具时由观察者更新

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