VueJS 道具的新值​​被推送而不是重置

Question

我的 VueJS 项目有问题。我在 DetailView.vue 中创建了一个 GoogleMaps 组件。地图组件使用三个道具，如driver,waypoints和stopOver。项目结构是： App.vue 包含 Login.vue 和一个到主仪表板视图的路由。在这个 MainView 里面，我有一些菜单元素，比如里面有一个 DataTable 的“Tours”。单击数据表行，VueJS 会在 a 中显示一个 DetailView.vue v-dialog（使用 Vuetify）。在这个 DetailView 里面有另一个数据表，一个开关，在顶部是我的地图组件。<LiefermaxMap style="width: 100%; height: 50%;" :waypoints="waypoints" :driver="driverLocation" :stopOver="showCalculatedTour"></LiefermaxMap>waypoints和driverLocation是计算属性，showCalculatedTour是常规属性，取决于开关的状态。关闭此 DetailVue 对话框并打开另一个游览会导致将另一组航点（以及 driverLocation）推送到该属性，而不是替换旧的。waypoints() {  var points = [];  if (!this.showCalculatedTour) {    this.loadnoSpecific.items.items.forEach(element => {      var p = { lat: element.latitude, lng: element.longitude, done: element.done };      points.push(p);    });  } else {    this.data.contracts.forEach(element => {      var c = element.customer.position;      var p = { lat: c.lat, lng: c.lng, done: element.done }      points.push(p);    });  }  console.log('points: ' + points)  return points;},driverLocation() {  const drv = this.data.location;  const marker = { lat: drv.latitude, lng: drv.longitude };  return marker;},我做错了什么？

Answer 1

vue 重用组件 - 用于key强制挂载

---

改变

<LiefermaxMap style="width: 100%; height: 50%;" :waypoints="waypoints" :driver="driverLocation" :stopOver="showCalculatedTour"></LiefermaxMap>

至

<LiefermaxMap style="width: 100%; height: 50%;" :key="waypoints" :waypoints="waypoints" :driver="driverLocation" :stopOver="showCalculatedTour"></LiefermaxMap>

用于key告诉 vue 不要重用组件 - 因此可以触发 mount ，

或移动您的initMap方法。