I am trying to use mixitup on vue.js but every time mixitup target showing 0 elements in container.(mixer.getStatu().totalShow)
Here my full vue.js component code
<template>
<section class="main-container object-non-visible" data-animation-effect="fadeInUpSmall" data-effect-delay="200">
<div class="container">
<div class="row">
<div class="main col-md-12">
<h1 class="page-title text-center">Fiziki Gerçekleşme Görselleri</h1>
<div class="separator"></div>
<div class="text-center" v-show="!showMap">
<p><span class="glyphicon glyphicon-refresh"></span> Harita yükleniyor...</p>
</div>
<highmaps :options="options" ref="map" v-if="showMap"></highmaps>
<div class="filters text-center" id="control_buttons" v-show="showControlButtons">
<p v-show="refreshButtons"><span class="glyphicon glyphicon-refresh"></span> Yükleniyor...</p>
<button class="btn btn-white control" data-filter="all">Tümü</button>
<button type="button" class="btn btn-white control"
v-for="h in hospitals"
:data-filter="setDataFilterClass(h.id)"
@click="mixitUpFilter(setDataFilterClass(h.id))">{{h.hospital_name}}</button>
</div>
</div>
</div>
</div>
<div class="gray-bg section" v-show="showControlButtons">
<div class="mixitup-container">
<slot v-for="h in hospitals">
<div v-for="photo in h.photos" :class="setFilterClass(h.id)"></div>
</slot>
<div class="gap"></div>
<div class="gap"></div>
<div class="gap"></div>
</div>
</div>
</section>
</template>
<script>
import VueHighcharts from 'vue-highcharts'
Vue.use(VueHighcharts, { Highcharts })
import mixitup from 'mixitup'
export default{
name:'physicalimagesmap',
data(){
var self = this;
return {
mapDataUrl:'/report/hospital-city-map-data',
mapHcKeyDataUrl:'/report/hospital-city-detail-by-hckey',
mapType:{'map_statu':'yatak'},
hospitalsData:[],
mixitFilters:[],
options:{
lang:{
downloadJPEG: 'JPEG Olarak İndir',
downloadPDF: 'PDF Olarak İndir',
downloadPNG: 'PNG Olarak İndir',
downloadSVG: 'SVG Olarak İndir',
printChart: 'Grafiği Yazdır'
},
title : {
text : ''
},
subtitle : {
text : ''
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colors: ['rgba(19,64,117,0.05)', 'rgba(19,64,117,0.2)', 'rgba(19,64,117,0.4)',
'rgba(19,64,117,0.5)', 'rgba(19,64,117,0.6)', 'rgba(19,64,117,0.8)', 'rgba(19,64,117,1)'],
legend: {
title: {
text: 'Yatak Sayısı (Toplam)',
style: {
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
},
layout: 'vertical',
align: 'right',
floating: true,
valueDecimals: 0,
valueSuffix: '',
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)',
symbolRadius: 0,
symbolHeight: 14,
x:0,
y:20
},
colorAxis: {
dataClasses: [{
from: 0,
to: 200
}, {
from: 200,
to: 500
}, {
from: 500,
to: 1000
}, {
from: 1000,
to: 2000
}, {
from: 2000,
to: 4000
}, {
from: 4000,
to: 5000
},{
from: 6000
}]
},
exporting: {
chartOptions: {
colorAxis: {
dataClasses: [
{
from: 1,
to: 200
}, {
from: 200,
to: 500
}, {
from: 500,
to: 1000
}, {
from: 1000,
to: 2000
}, {
from: 2000,
to: 4000
}, {
from: 4000,
to: 5000
},{
from: 6000
}]
}
}
},
credits:{
enabled:false
},
series:[{
animation: {
duration: 1000
},
data : [],
mapData: Highcharts.maps['countries/tr/tr-all'],
dataLabels: {
enabled: true,
formatter: function () {
if (this.point.properties) {
return this.point.properties['name'];
}
},
format: null,
style: {
fontWeight: 'bold'
}
},
joinBy: ['hc-key'],
name: 'Yatak Sayısı',
cursor: 'pointer',
point:{
events:{
click:function(e){
self.hcKey = e.point['hc-key'];
self.refreshButtons = true;
self.getCityHospitalData();
console.log(mixer.getState().totalShow);
}
}
}
}]
},
showMap:false,
hcKey:'',
showControlButtons:false,
hospitals:{},
refreshButtons:false
}
},
methods:{
setMap(){
var self = this;
axios.post(this.mapDataUrl,this.mapType)
.then(function (response) {
self.options.series[0].data = response.data
self.showMap = true;
});
},
getCityHospitalData(){
var self = this
if(this.hcKey!==''){
axios.post(this.mapHcKeyDataUrl,{'hcKey':this.hcKey})
.then(function (response) {
self.hospitals = response.data.hospitals
self.showControlButtons = true
self.refreshButtons = false
mixer.forceRefresh()
}).catch(function(error){
console.log(error);
});
}
},
setDataFilterClass(hospitalId){
return '.hospital-image-'+hospitalId
},
setFilterClass(hospitalId){
return 'mix hospital-image-'+hospitalId
},
mixitUpFilter(filterClass){
mixer.filter(filterClass)
}
},
mounted(){
this.setMap()
window.mixer = mixitup($('.mixitup-container'))
}
}
</script>
I am getting controls and container elements with ajax(axios).So they are created to dynamically.
But mixitup doesnt show container elements and control buttons.
I tried to mixer.destroy() also mixer.forceRefresh() but it doesnt work.
Any idea and help would be appreciated.
Thanks
Your setup is definitely a bit more complicated, but I setup an example repo just to make sure Vue.js and MixItUp could work well together since I also need to use them together.
https://github.com/jordanboston/mixitup-vue-example
This is just a basic example taken from the Kunk Labs site. I'm using the npm i -S mixitup option and it is working well, at least for a basic example like this one.
Hope this could be of some help.