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

    }

正如你所看到的，它是一样的，但是this.models没有用道具 carModels 填充，尽管道具被填充了！。我不知道发生了什么。谢谢

标签： javascriptvue.jsaxiosvue-component

Answer 1

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

 return {
      models:this.carModels
   }

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

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