Vue2leaflet: Pass custom property to the component

Created on 31 Jul 2019  Â·  12Comments  Â·  Source: vue-leaflet/Vue2Leaflet


Description

There is a plugin that allows to add dragging capability to Leaflet path (Polygon, Polyline, Rectangle, Circle, CircleMarker…).
Path.Drag.js
If I want a path to be draggable as soon as it's added to map, I can add draggable: true to its options.
But this options are skiped whew I specify it into component.
Example:

<LCircle
  :lat-lng="[56.0, 43.0]"
  :radius="radius"
  :stroke="true"
  fill-color="#ff9900"
  :draggable="true"
/>

Expected Results

It would be good to be able to pass on additional parameters of third-party plug-ins to the components such as LCircle and so on.

Actual Results

optionsMerger skips parameters that do not belong to the circle instance.

Browsers Affected

  • [x] Chrome
  • [x] Firefox
  • [x] Edge
  • [ ] Safari 9
  • [ ] Safari 8
  • [ ] IE 11

Versions

  • Leaflet: v1.4.0
  • Vue: v2.6.10
  • Vue2Leaflet: v2.2.1
wontfix

Most helpful comment

@evgencode you are 90% right, there is a couple more of component where options is missing! Nice catch I will provide a fix for this in the coming days! Thank you

All 12 comments

@evgencode if you don't need draggable to be reactive you can use the options prop to pass in any data you want.

Will this satisfy your use case?

@evgencode if you don't need draggable to be reactive you can use the options prop to pass in any data you want.

Will this satisfy your use case?

something like this?

:options="{draggable: true}"

<LCircle
  :lat-lng="[56.0, 43.0]"
  :radius="radius"
  :stroke="true"
  fill-color="#ff9900"
  :options="{draggable: true}"
/>

Unfortunately, it doesn't help

I think it should to add 'option' property to the props Mixins
It is lost.
image
If I describe the property, it works

LCirle component if I specify "options" property within "/mixins/Layer.js"
image

@evgencode All our components extends the options mixin so they all have it. can you create a codesandbox repro so I can take a deeper look ?

@evgencode All our components extends the options mixin so they all have it. can you create a codesandbox repro so I can take a deeper look ?

Here: https://codesandbox.io/embed/vue-template-irqyu

I had a look at /vue2-leaflet/types/index.d.ts
LCircle extends Mixins(Circle)
Circle extends Mixins(Path)
Path extends Mixins(Layer, InteractiveLayer)
Layer and InteractiveLayer extend only Vue
No extending Options

@evgencode Options is imported component by component :) as a mixin.
I will take a look at the repro case

@evgencode Options is imported component by component :) as a mixin.
I will take a look at the repro case

"options" parameter works in all components except LCircle. Version 2.2.1

@evgencode you are 90% right, there is a couple more of component where options is missing! Nice catch I will provide a fix for this in the coming days! Thank you

@DonNicoJs any news about it? I found it really not working and options needed for setting all params in one place

@pumano Thanks for the ping, I have a release coming out today this will be included!

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Any fixes on this?

As seen in code - fixed. But I dont test it

Was this page helpful?
0 / 5 - 0 ratings

Related issues

DmitriyVTitov picture DmitriyVTitov  Â·  4Comments

martinwithyou picture martinwithyou  Â·  4Comments

Abdelaziz18003 picture Abdelaziz18003  Â·  4Comments

lufias picture lufias  Â·  3Comments

rhoseno98 picture rhoseno98  Â·  4Comments