I'm trying to add multiple leaflet maps dynamically in my Nuxt Vue 3 app.
I'd like to do something like this:
<div v-for="(item, index) in listitems">
<div id="map" :ref="dynamicmap[index]"></div>
</div>
and then in onMounted:
for(n=0; n<countitems; n++)
{
map2[n] = L.map(dynamicmap[n]);
}
How I can achieve this?
Thanks a lot!
Samuel
Have you tried to encapsulate a/one map as a separate Vue component?
<div v-for="(item, index) in listitems">
<MyLeafletMap :key="index"/>
</div>
MyLeafletMap.vue then consists only of
<div id="map" :ref="dynamicmap"></div>
Related
Im currently trying to display price (loaded via an api) under the days of a datepicker (a bit like google flights).
Exemple:
Im currently using Vue 3. Im trying to acheive this using Element-plus library. I can't find a way how to do it. Any suggestion (i checked Element-plus doc), or suggestion may another Vue 3 lib does exactly the same !
Here's my code
<link href="//unpkg.com/element-plus/lib/theme-chalk/index.css" rel="stylesheet" type="text/css"/>
<script src="//unpkg.com/vue#next"></script>
<script src="//unpkg.com/element-plus/lib/index.full.js"></script>
<div class="grid-container-medium">
<div id="app">
<div class="d-flex justify-content-between">
<div class="block"><span class="demonstration">Single</span>
<el-date-picker :default-value="new Date(2021, 6, 28)"
placeholder="Pick a date"
type="date"
:disabled-date="disabledDate"
v-model="value1"></el-date-picker>
</div>
</div>
</div>
</div>
<script>
var Main = {
data() {
return {
value1: '',
value2: '',
disabledDate(time) {
return time.getTime() < Date.now()
},
};
}
};
;const app = Vue.createApp(Main);
app.use(ElementPlus);
app.mount("#app")
</script>
In the last version of Element+ (v1.2.0-beta.1) they have added a new #cell slot in the DatePicker component.
Docs: DatePicker - Custom content
<template #default="cell">
<div class="cell" :class="{ current: cell.isCurrent }">
<span class="text">{{ cell.text }}</span>
<span v-if="isHoliday(cell)" class="holiday"></span>
</div>
</template>
So, you can do it now with Element+ also.
You can use the PrimeVue Calendar component. It has a date slot:
<Calendar id="datetemplate" v-model="date_with_price">
<template #date="slotProps">
{{slotProps.date.day}}<br>
{{slotProps.date.price}}
</template>
</Calendar>
In Nuxt I have 3 pages (index, login and register) that needs to show the same structure, the code above.
It's a form with tabs. then in the tag it's were I show some diferences.
I decided to put that code in the default.vue file.
But now, I have more pages were I don't need to show the "forms" class and the tabs.
Any suggestion about how can I achieve it?
Thank you
<template>
<div>
<div class="container is-fluid">
<navbar></navbar>
<div class="places">
<div class="structure">
<div class="forms">
<div class="tabs help-tabs">
<ul class="tab_title">
<li :class="[tab === 'register' ? 'is-active' : '']">
<a #click="tab='register'">Register</a>
</li>
<li
:class="[tab === 'login' ? 'is-active' : '']"
#click="goToRoute('login')">
<a #click="tab = 'login'">Login</a>
</li>
</ul>
</div>
</div>
<nuxt />
</div>
</div>
</div>
</div>
</template>
You could either create a second layout beside the default.vue and use it only for these routes (index, login and register) so you have:
auth.vue for index, login and register pages
default.vue for all other pages
You could then specify which layout you want to use in the page file directly like here
export default {
layout: 'auth',
}
Or you stick to using one single layout (default.vue) and create a component (eg. tab component) which you then display on all 3 of those routes.
On a page, using ng-repeat, I try to place buttons on a grid layout.
Iterating through an array which is defined in a controller $scope.btnNames[]. buttons are place on Total number of buttons equal to array size of $scope.btnNames[]
I would like to put say 4 buttons per row.
As $scope.btnNames[] size is 20, then I like to place 20 buttons on 5 rows,
where each row will have 4 buttons.
1) on Controller :
- I have an array with button names
$scope.btnNames['aa', 'bb', 'cc','dd', 'ee', 'ff'....] whose size is 20.
2) on the page:
- using ng-repeat, iterate throught the
$scope.btnNames[] and put buttons as per follwoing code
<body ng-controller="PopupCtrl">
<div class="row responsive-sm">
<div ng-repeat="btnName in btnNames">
<button id={{$index}} class="button button-dark col" >{{btnName}}</button>
</div>
</div>
Please help me defining class="row" and class="col" and such a way that,
during ng-repate, after 4th button, it should add a new row and place 4 buttons till it reach end of ng-repeat.
Being new to both ionic and angulrJs, I'm not able to define class="row" during ng-repeat ( similar like a for loop, where, put a new class="row", when iterator counter in this case {{index}} greater than 4.
Use flex-wrap
You can get this behavior by using style="flex-wrap: wrap;" + the following CSS classes:
<div class="row" style="flex-wrap: wrap;">
<div class="col col-25" ng-repeat="btnName in btnNames">
<button class="button button-dark" >{{btnName}}</button>
</div>
</div>
http://codepen.io/Jossef/pen/doeJJP
You can find a possible solution here : https://stackoverflow.com/a/23780288/1015046
I have taken the above solution and implemented it for Ionic : http://codepen.io/arvindr21/pen/EaVLRN
<div ng-repeat="btnName in btnNames">
<div ng-if="$index%4==0" class="row">
<div class="col">
<button id={{$index}} class="button button-dark">{{btnNames[$index]}}</button>
<button id={{$index+1}} class="button button-dark">{{btnNames[$index+1]}}</button>
<button id={{$index+2}} class="button button-dark">{{btnNames[$index+2]}}</button>
<button id={{$index+3}} class="button button-dark">{{btnNames[$index+3]}}</button>
</div>
</div>
</div>
If you want the grid to be dynamic, you can take a look at : https://stackoverflow.com/a/27080632/1015046
Thanks.
Ok, So if you want to stack images like me in rows, See how the ng-repeat holds col-50.
<div class="row gallery">
<div class="col col-50" ng-repeat="photo in photos">
<img id="fitWidth" ng-src="{{photo.url}}"/>
</div>
</div>
Then with your css.
.gallery {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
Tested on IOS, Hope that helps :)
I would just like to add to the #Jossef Harush's answer (which, btw, worked).
However, when I tested it in the Ionic View application on iPhone, it didn't work. When I tested it in the Ionic View application on Android it worked as expected (multiple rows).
The solution was to add this as a style:
style="display: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap;"
because, as you can see here Safari needs a -webkit prefix.
Hope this helps someone who will choose this solution over #Arvind's.
Worked for me as soon as I added flex-wrap: wrap in the styling.
Since i have set col-50 I started getting rows with two columns as intended.
Example:
<div class="row" style="flex-wrap: wrap;">
<div class="col col-50" ng-repeat="picture in pictures">
{{picture.src}}
</div>
</div>
There's a limitTo starting $index in AngularJS,
Maybe that can simplify things
<div class="row" ng-repeat="element in elements" ng-if="$index % 4==0">
<div class="element" ng-repeat="element in elements|limitTo:4:$index">...</div>
</div>
That will make sure that {{ index + 1 }} fall on a non-existent cell ..
I would like to pass a value from a slide out of JSSOR to other parts of the DOM.
Markup:
<div class="slide">
<img data-u="image" src="bilder/bild2.jpg" />
<div class="caption" data-u="caption" ><p>Caption text</p></div>
</div>
JS:
jssor_slider1.$On($JssorSlider$.$EVT_PARK,function(slideIndex,fromIndex){
$(".outer-caption").text(currentCaption);
});
The custom JSSOR Event, EVT_PARK, works fine. But what's missing is how to get the caption of the current slide and put it into the variable currentCaption. How to do that?
And if so, where could I have found that out on my own?
Please have a full test of following code,
<div class="slide">
<img data-u="image" src="bilder/bild2.jpg" />
<div class="caption" data-u="caption" id="caption-slide-0"><p>Slide 0 Caption</p></div>
</div>
jssor_slider1.$On($JssorSlider$.$EVT_PARK,function(slideIndex,fromIndex){
$("#outer-caption").text($("#caption-slide-" + slideIndex).text());
});
<div id="container">
<div class="active">
<div class="active"></div>
</div>
<div>
</div>
</div>
How to write such a container?
Use .index() without parameters to get it's (0-based) index amongst siblings, like this:
var index = $("#container .active").index();
You can test it out here. For your example markup, it would be 0.