I need to place a Label inside each Polygon in a map. These polygons are generated by a v-for and I wish I could set a <l-tooltip> inside these <l-geojson> components but it just doesn't work.
<LeafletMap v-if="location"
class="map"
:canEdit="canEditMap"
:zoom="13"
:center="coordinates"
:geoFences="geoFences">
<div v-for="(fence, index) in geoFences" :key="index"
v-show="!canEditMap">
<l-geojson
:geojson="fence.geo_json"
color="green">
</l-geojson>
</div>
</LeafletMap>
Is there any other way to do it?
Related
I have a project where I use Vue Transitions in order to animate the sorting and filtering a grid containing car components. Each grid elements contains one car-component.
The problem is that the user can invite new users to the platform. Those new users/cars are not the same objects as the existing objects that each is shown in a car-component. In these new objects I show different type of data/information.
This is why I have chosen to show these 'new' users using a different type of component then the car-components.
The problem is that both components need to be shown inside the same CSS grid. But when I try to add both components inside a transition group, that transition group breaks and it no longer performs the sorting animations.
<transition-group class="grid">
<InvitedUsers v-for="invite in Invited" />
<Users v-for"user in Users" />
</transition-group>
Is there a way around this? Can I add bot set of items inside the same CSS grid and still have the transition group do its work? I have tried the following, but it doesn't work because both set of items are created in different grids. But this way the transition-group works again.
<div class="grid">
<InvitedUsers v-for="invite in Invited" />
</div>
<transition-group class="grid">
<Users v-for"user in Users" />
</transition-group>
I have struggled with the same issue once. We can not directly wrap components inside <transition-group>, there has to be another wrapper around the component.
Here is an example
<transition-group class="grid">
<div v-for"user in Users">
<Users />
</div>
<div v-for="invite in Invited">
<InvitedUsers />
</div>
</transition-group>
You may have to adjust your grid container a little bit.
I am using this component https://element.eleme.io/#/en-US/component/popover
Issue related to triggering element (it is used to calculate where is popover located)
For the triggering element, you can write it in two different ways: use the slot="reference" named slot, or use the v-popover directive and set it to Popover's ref.
Everything ok with default examples. But I am using transparent wrapper for el-popover component like so.
<script id="my-popover" type="x-template">
<el-popover
ref="mypopover"
transition="el-zoom-in-top"
v-bind="$attrs"
v-on="$listeners"
>
<!-- Pass on all named slots -->
<slot
v-for="slot in Object.keys($slots)"
:slot="slot"
:name="slot"
/>
<span> My popover </span>
</el-popover>
</script>
It works ok with slot="reference" named slot.
<my-popover
placement="bottom"
title="Title"
width="200"
trigger="manual"
v-model="visible"
>
<el-button
slot="reference"
#click="visible = !visible"
>
Click me
</el-button>
</my-popover>
But due to complex layout I need to use v-popover directive. Got no luck with wrapped component.
<my-popover
ref="popover"
placement="right"
title="Title2"
width="200"
trigger="manual"
v-model="visible2"
>
</my-popover>
<el-button
v-popover:popover
#click="visible2 = !visible2"
>
Click me too
</el-button>
So I need somehow to pass in v-popover reference to ref="mypopover" from wrapped component. I.e. pass ref to child directly in template.
I've tried v-popover:popover.$refs.mypopover but that doesn't work.
Related codepen https://codepen.io/anon/pen/rgRNZr
Click on button Click me too should show popup connected to that button.
The problem is that the ref you want is the one that is on the el-popover but you are using the ref that is set on the my-popover component instead of the one you want.
This is kind of a wierd thing since that component wants a ref but it will be annoying to get one from the component inside your component.
I would put the button and popup with a slot in the same component.
The problem I'm trying to solve is I want the child component to react when a v-expansion panel is expanded/contracted.
Normally this would be trivial, however, I'm attempting to pass a value from a prop within a vuetify component to component via a scoped slot. Because I'm rendering the child components within a loop, I can't just use Data to bind the prop.
<v-expansion-panel expand>
<v-expansion-panel-content
v-for="item in this.items"
:key="item.key">
<div slot="header">
content
</div>
<slot :items="item.children"></slot>
</v-expansion-panel-content>
</v-expansion-panel>
The v-expansion-panel-content has a prop called value. I need to bind that prop to the slot. Ideally, I'd like to achieve something like this:
<slot :items="item.children" :panelValue="value"></slot>
Any ideas would be greatly appreciated.
I've solved this, but in a less than ideal way.
<v-expansion-panel expand>
<v-expansion-panel-content
v-for="item in this.items"
:key="item.key"
v-model="item.isOpen">
<div slot="header">
content
</div>
<slot :items="item.children" :isVisible="item.isOpen"></slot>
</v-expansion-panel-content>
I have a custom component that requires to have a v-for list underneath it.
<draggable>
<div v-for="item in items">...</div>
</draggable>
I'm trying to add a <transition-group> component to add animations when the list items change. The issue is if I set the <transition-group> component as a child the <draggable> component the <draggable> doesn't work. If I set the <transition-group> as a parent of <draggable> then transition group doesn't work. What is a workout around for this?
This should work fine:
<draggable>
<div>
<transition-group>
<div v-for="item in items">...</div>
</transition-group>
</div>
</draggable>
I'm using React-Leaflet and (callemall)Material-UI in a project. I'm attempting to render the Material-UI Card component within the <Popup></Popup> component of React-Leaflet. I've tried pulling it into the Popup as a component but the popup doesn't let the component work as it should. Specifically, the card component has a button element that expands it but unfortunately, the popup won't let me click it. I'm sure there's some CSS-y thing that I need to override but my thought is that an easier option would be to just replace the popup component with my own component but I'm not sure how to go about doing so. Any insight is much appreciated :)
My code looks like this:
<Marker position={position}>
<Popup>
<MapPopup />
</Popup>
</Marker>
And the imported component looks like: (I've removed styles and unimportant details to make it simple to read)
<Card>
<CardHeader />
<CardMedia
expandable={true}
overlay={
<CardText expandable={true}>
<div>
<p>Text</p>
<Chip>text</Chip>
</div>
<div>
<p>Text</p>
<Chip>Text</Chip>
</div>
</CardText>
}>
<img src="cardMediaImageURL" />
</CardMedia>
</Card>
Long story short, React-Leaflet and Leaflet renders static html for the popup so it is not possible to render dynamic content within it. Rendering a material-ui component is possible, however it won't be interactive. You can accomplish this by wrapping your component with <MuiThemeProvider></MuiThemeProvider>. You just have to make sure that you have the content set to be the complete view and not with anything like an expander.
Solution is as follows:
<Popup>
<MuiThemeProvider muiTheme={getMuiTheme(yourThemeName)}>
<YourCustomComponent />
</MuiThemeProvider>
</Popup>