In my vue component i have a data array that contain a list of image;
so i render these image with v-for
<div class="body-details-img-gall GalleryImgSlide" id="slideup">
<img :data-hash="'slide-' + item.id" :src="asset + 'image/message/chat/' + id + '/' + item.filename" class="d-block w-100" alt="" v-for="(item, i) in (pictures)" :key="'slideup-' + item.id">
</div>
so in my mounted i initialise the owl carousel
$(document).ready(function(){
$(".GalleryImgSlide").owlCarousel(
{
items:1,
smartSpeed:450,
nav: true,
mouseDrag: false,
URLhashListener:true,
startPosition: 'URLHash',
}
);
}.bind(this))
my carousel work fine; now i want to push another picture inside the data pictures; but it's not considered by the actual carousel;
Is there a way to re-render the carousel after pushing data or is it possible to add the item dynamically on the caroussel?
Related
I have a view component where I want to be able to drag certain elements (.draggable) onto other certain elements (.droppable) like this:
I can set it up for static <div> elements in mounted() like this:
mounted(){
$('.draggable').draggable({
revert: true
})
$('.droppable').droppable({
hoverClass: 'drop-hover',
drop: function(){
console.log('-= dropped =-')
}
})
}
...
<div class="droppable">Drop Here</div>
<div class="draggable">Drag Me</div>
<div class="draggable">Drag Me</div>
<div class="draggable">Drag Me</div>
But when I want to do this on dynamically in Vue JS with v-for then the jQuery UI bindings seem to get lost:
<div v-for="(item, index) in items">
<div class="droppable">{{ item.name }}</div>
<div v-for="(folder, index) in item.folders" class="draggable">{{ folder.name }}</div>
</div>
I can no longer drag the .draggable items.
As I understand it, jQuery Draggable/Droppable does not work with .on since I suspect one of the issues is that my DOM elements are generated after jQuery is initialized. I tried wrapping my jQuery code in this.$nextTick(() => { ... }) but it still doesn't work.
I have also looked at Vue.Draggable but I want the drag and drop without the simultaneous reordering.
Is it possible to combine jQuery Draggable/Droppable with dynamic data in Vue JS?
I have a transition-group containing two or more images. This is working, but now I want to preload the next image in line.
This is what I have now:
<template>
<transition-group name="fade" tag="div">
<div v-for="i in [currentIndex]" :key="i" class="absolute inset-0">
<img :src="currentImg" class="object-center object-cover w-full h-full" rel="preload" />
</div>
</transition-group>
</template>
Every time I update currentIndex, currentImg gets computed, so that works. Now I need to preload the currentIndex + 1 image. Is this possible?
If you want to preload an image, you can previously initialize an image in JavaScript, that's not mounted in the DOM:
var preloadingImg = new Image;
preloadingImg.src = "/path/to/img.jpg"; // replace string with img source of [currentIndex + 1]
// optional callback when it's loaded:
preloadingImg.onload = function(event) {
// ...
}
As long as the browser keeps the image in cache, the source link will not be requested again.
(Deleting the variable has no influence in the cache of the image.)
Im using bootstrap vue's pagination component to break up and display content from a v-for loop. I am slicing the array perPage. Everything seems to be working. the correct number of perPage is displayed. The correct number of rows. The only problem is that when I select a new page, the content is never updated on the screen. It shows the same data on every page.
I have console logged the sliced array depending on what page and the slice is happening and working on everyPage click, I just cant get that new array to display on screen.
<b-paggination v-model="currentPage" :total-rows="rows" :per-
page="perPage" aria-controls="my-table" </b-pagination>
<b-col v-if="!showLoad" class="mb-4" v-for="(data,index) in
listOfData" id="my-table" :key="index" cols="12>
<app-card v-bind:data="Data[index]></app-card>
</b-col>
computed: {
rows() {
return this.data.length;
}
listOfData() {
const items = this.Data
return items.slice((this.currentPage - 1) * this.perPage,
this.currentPage * this.perPage);
}
}
Update: I discovered that injecting the content from the v-for into the imported card component (app-card) was somehow stoping the content from updating from page to page. I just removed the app-card component and hard coded a card in its place.. Now for some reason the content is changing from page to page.
```
//This Works:
<div v-for="(data, index) in listOfData" :key="index">
<b-card
overlay
img-src="https://picsum.photos/900/250/?image=3"
img-alt="Card Image"
text-variant="white"
title="Image Overlay"
sub-title="Subtitle"
>
<b-card-text>
{{ data.Data }}
</b-card-text>
</b-card>
</div>
//This Doesnt Work:
<div v-for="(data, index) in listOfData" :key="index">
<app-card v-bind:Dataprop="Data"></app-card>
</div>```
In the following code I expected everything to be rendered inline, but they are not. Why isn't the component rendered inline when it is a span?
<div id='app'>
<span v-for="ville in nomVilles">
<span>{{ville}} </span>
</span>
<liste-villes :villes ="nomVilles"></liste-villes>
</div>
Vue.component('liste-villes',{
template: '<span >\
<span v-for="ville in villes">\
<p>{{ville}} </p>\
</span>\
</span> ',
props: ['villes']
});
var vm = new Vue ({
el:'#app',
data: {
nomVilles:['Vancouver','Montreal']
}
})
The span element is an inline element, while the p tag is a block element.
You are trying to render a paragraph element inside a span tag, so it still takes up the entire block level, forcing the next span to not be inline.
I have managed to create a carousel (slider) using Vue-strap carousel component with the following code:
<carousel>
<slider v-for="(photo,index) in photos" :key="photo.sequenceID" >
<img v-bind:src="'https://../photo/' + photo.photoFilename " >
</slider>
</carousel>
Carousel is working. I also display thumbnails of images on the page. I want to select a specific slide when I click a thumbnail.
How can I display a specific slide in the carousle? Is there a function in Vue-strap carousle or slider that can displays specific slide if I pass the slide number?
The following code will display the slide fo the pictureID. It uses the indicatorClick() method of the carousel component. Here vm is the Vue object name.
vm.$children[0].indicatorClick(pictureID);
Late reply:
You can use the navigateTo prop as follows:
template.vue > tamplate/transition
<carousel
:perPage="1"
:navigateTo="carouselPosition"
:navigationEnabled="true"
:paginationEnabled="false">
<slide>
...
</slide>
</carousel>
carouselPosition should be stored as a prop:
template.vue > export default {}
data () {
return {
carouselPosition: null // OR 1
}
}
Include the following on your thumbnail element:
template.vue > component thumbnail
v-on:click=";(carouselPosition = index)"
In this case the index value would be generated in a loop:
template.vue > component loop
v-for="(thumbnail, index) in yourData"
NOTE: Nuxtjs used in this example but it should easy to modify these examples to your needs.
Using v-model
See Carousel documentation;
Programmatically control which slide is showing via v-model (which binds to the value prop). Note, that slides are indexed starting at 0
<b-carousel
id="image-carousel"
controls
indicators
img-width="1024"
img-height="480"
v-model="currentSlide"
>
Inside my slide I use a img for every thumbnail. Upon click currentSlide is changed to the index of the thumbnail.
<img
v-on:click="showImage(index)"
/>
store currentSlide in data:
data() {
return {
currentSlide: 0
}
}
method for changing currentSlide
showImage (index) {
this.currentSlide = index;
}
Vue will update the value prop of the slider if the v-model reference is changed.
use v-bind:data-slide-to="index"
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators"
v-for="(image, index) in images" v-bind:key="index"
v-bind:data-slide-to="index"
:class="{'active' : index===0}"></li>
</ol>