javascript - Vue - 使用 axios 请求填充 Prop 的问题

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

    }

正如你所看到的，它是相同的，但是 this.models 没有填充 Prop carModels，尽管 Prop 已填充!。我不知道发生了什么事。谢谢

Answer 1

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

 return {
      models:this.carModels
   }

这样，props 数据首先被复制，然后在 props 更新时由观察者更新

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