Questions about ol-interaction-modify compnent

[iboates]

I have a vector layer of features that I can add to and remove from. I want to be able to modify the geometry, but I can't figure out how to specify it.

  <!-- Wind farm site features layer -->
  <ol-vector-layer>

    <ol-source-vector :projection="projection" ref="vectorLayerTemplateRef">
      <ol-feature
        v-for="(windFarmSiteFeature, index) in windFarmSiteFeatures"
        :key="index"
        :properties="windFarmSiteFeature.properties"
        :ref="'windFarmOlFeature_' + windFarmSiteFeature.properties.windFarmSiteId"
      >
        <ol-geom-polygon :coordinates="windFarmSiteFeature.geometry.coordinates" />
      </ol-feature>
      <ol-interaction-modify />
    </ol-source-vector>

    <!-- Doesn't work -->
    <!-- <ol-interaction-modify
      :source="vectorLayerTemplateRef"
    /> -->

    <ol-style>
      <ol-style-stroke color="blue" :width="2"></ol-style-stroke>
      <ol-style-fill color="rgba(255,255,255,0.5)"></ol-style-fill>
    </ol-style>
  </ol-vector-layer>

  <!-- Doesn't work -->
  <!-- <ol-interaction-modify
    :source="vectorLayerTemplateRef"
  /> -->

The ones marked with <!-- Doesn't work -_> just crash the application.

I have it placed inside the ol-source-vector component, but I still get this error in the console:

[Vue3-OpenLayers Error] OlInteractionModify: Modify interactions needs either a source or features to work.
      Please provide either the props 'source' or 'feature' or use the component with an '<OlSourceVector>' component.

I don't understand how this is supposed to work, can somebody please provide me with an example of how you are supposed to actually link this to the ol-source-vector component?

[d-koppenhagen]

The VectorLayer is exposed as vectorLayer. So I think it should work once you change the access to:

<ol-interaction-modify
    :source="vectorLayerTemplateRef.vectorLayer"
  />

[iboates]

Thanks for the reply, but it is still not working. Whether I put it inside the ol-source-vector or not, it seems to crash:

  <!-- Wind farm site features layer -->
  <ol-vector-layer>

    <ol-source-vector :projection="projection" ref="vectorLayerTemplateRef">
      <ol-feature
        v-for="(windFarmSiteFeature, index) in windFarmSiteFeatures"
        :key="index"
        :properties="windFarmSiteFeature.properties"
      >
        <ol-geom-polygon :coordinates="windFarmSiteFeature.geometry.coordinates" />
      </ol-feature>
      <ol-interaction-modify
        :source="vectorLayerTemplateRef.vectorLayer"
      />
    </ol-source-vector>
      <!-- Doesn't work -->
      <!-- <ol-interaction-modify
        :source="vectorLayerTemplateRef.vectorLayer"
      /> -->
    <ol-style>
      <ol-style-stroke color="blue" :width="2"></ol-style-stroke>
      <ol-style-fill color="rgba(255,255,255,0.5)"></ol-style-fill>
    </ol-style>
  </ol-vector-layer>

  <!-- Doesn't work -->
  <!-- <ol-interaction-modify
    :source="vectorLayerTemplateRef.vectorLayer"
  /> -->

It seems that it is because it's not defined:

Sorry, I'm not that experienced with Vue. I am aware of the lifecycle but it seems to me like I shouldn't have to do any onMounted() hackery to make this work. Further down, I get a recursion error, but I think that might just be a cascading failure from the first one: