Vuejs 在使用 v-if 打開和關閉時丟失其 @click 綁定處理程序

Question

我正在使用 vue-leaflet 和 esri-leaflet

我在一個 vue 組件中渲染兩個單獨的 ESRIFeatureLayers，並通過 v-if 在它們之間切換。 在第一頁加載。 map @click 處理程序工作正常。 但是一旦它們通過 v-如果點擊處理程序不再觸發

這是vue組件

<LLayerGroup
    name="Zones"
    layer-type="overlay"
  >
    <EsriFeatureLayer v-if="this.hydroUnit === GROUNDWATER"
      ref="gw-layer"
      :url="GW_FEATURES_URL"
      :token="ARCGIS_TOKEN"
      :style-function="gwStyle"
      :simplify-factor="0.5"
      @mouseover="mouseover"
      @mouseout="mouseout"
      @click="clickGW"
      @featureLayer="updateFeatureLayer"
    />
      <LMarker v-if="markerLatLng"
        name="clickMarker"
        :lat-lng="markerLatLng">
        <LTooltip :options="{ permanent: true }">{{ Markertooltip }}</LTooltip>
      </LMarker>
    <EsriFeatureLayer v-if="this.hydroUnit === SURFACE_WATER && this.sWSitesColors.length > 0"
      ref="sw-layer"
      :url="SW_FEATURES_URL"
      :token="ARCGIS_TOKEN"
      :style-function="swStyle"
      :simplify-factor="0.5"
      @mouseover="mouseover"
      @mouseout="mouseout"
      @click="clickSW"
      @layerClicked="clickSW"
      @featureLayer="updateFeatureLayer"
    />
  </LLayerGroup>

這是 ESRIFeatureLayer 插件組件

<template>
  <div style="display: none;">
    <slot @click="$event('layerClicked')" v-if="ready" />
  </div>
</template>

<script>
import { findRealParent, propsBinder } from 'vue2-leaflet'
import { featureLayer } from 'esri-leaflet'
import * as L from 'leaflet'
const props = {
  url: {
    type: String,
    required: true,
  },
  styleFunction: {
    type: Function,
    default: undefined,
  },
  simplifyFactor: {
    type: Number,
    default: undefined,
  },
  precision: {
    type: Number,
    default: undefined,
  },
  visible: {
    type: Boolean,
    default: true,
  },
  layerType: {
    type: String,
    default: undefined,
  },
  name: {
    type: String,
    default: undefined,
  },
  token: {
    type: String,
    default: undefined,
  },
  pane: {
    type: String,
    default: undefined,
  },
}
export default {
  name: 'EsriFeatureLayer',
  props,
  data () {
    return {
      ready: false,
    }
  },
  watch: {
    styleFunction (newVal) {
      this.mapObject.setStyle(newVal)
    },
    url (newVal) {
      this.parentContainer.removeLayer(this)
      this.setOptions()
      this.parentContainer.addLayer(this, !this.visible)
    },
  },
  mounted () {
    this.setOptions()
    L.DomEvent.on(this.mapObject, this.$listeners)
    propsBinder(this, this.mapObject, props)
    this.ready = true
    this.parentContainer = findRealParent(this.$parent)
    this.parentContainer.addLayer(this, !this.visible)
  },
  beforeDestroy () {
    this.parentContainer.removeLayer(this)
  },
  methods: {
    setVisible (newVal, oldVal) {
      if (newVal === oldVal) return
      if (newVal) {
        this.parentContainer.addLayer(this)
      } else {
        this.parentContainer.removeLayer(this)
      }
    },
    setOptions () {
      const options = {}
      if (this.url) {
        options.url = this.url
      }
      if (this.styleFunction) {
        options.style = this.styleFunction
      }
      if (this.simplifyFactor) {
        options.simplifyFactor = this.simplifyFactor
      }
      if (this.precision) {
        options.precision = this.precision
      }
      if (this.token) {
        options.token = this.token
      }
      if (this.pane) {
        options.pane = this.pane
      }
      this.mapObject = featureLayer(options)
      this.$emit('featureLayer', this.mapObject)
    },
    updateVisibleProp (value) {
      this.$emit('update:visible', value)
    },
  },
}
</script>

我嘗試添加一個事件單擊處理程序，正如您在@click="$event('layerClicked')"中看到的那樣

但是一旦它們被關閉一次，就不會觸發點擊事件。

如果通過 v-if 綁定重新顯示組件，我如何將 @click 處理程序重新綁定到 ESRIFeatureLayer？

Answer 1

我找到了一個修復

我所要做的就是在子組件上更改監視屬性（url）時重新初始化偵聽器

家長

<EsriFeatureLayer 
      :url="this.hydroUnit === GROUNDWATER ? GW_FEATURES_URL : SW_FEATURES_URL"
      :token="ARCGIS_TOKEN"
      :style-function="this.hydroUnit === GROUNDWATER ? gwStyle : swStyle"
      :simplify-factor="0.5"
      @mouseover="mouseover"
      @mouseout="mouseout"
      @click="click"
      @featureLayer="updateFeatureLayer"
    />

三元運算符在更改水力單元時更改了 URL

ESRIFeatureLayer 中觀察到的 url 變量重新初始化監聽器

  watch: {
    styleFunction (newVal) {
      this.mapObject.setStyle(newVal)
    },
    url (newVal) {
      this.parentContainer.removeLayer(this)
      this.setOptions()
      this.parentContainer.addLayer(this, !this.visible)
      L.DomEvent.on(this.mapObject, this.$listeners)
    },
  },
  mounted () {
    this.setOptions()
    L.DomEvent.on(this.mapObject, this.$listeners)
    propsBinder(this, this.mapObject, props)
    this.ready = true
    this.parentContainer = findRealParent(this.$parent)
    this.parentContainer.addLayer(this, !this.visible)
  },