0
ich auf vue.js zu verwenden mixitup versuchen aber jedes Mal mixitup Ziel 0 Elemente in Behälter zeigt. (mixer.getStatu().totalShow)Mit mixitup mit Vue.js 2.0 Component
Hier meine volle vue.js Komponentencode
<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>
Ich bekomme Kontrollen und Container-Elemente mit Ajax (Axios). So werden sie dynamisch erstellt.
Aber Mixitup zeigt Containerelemente und Steuerschaltflächen nicht an.
Ich habe versucht, mixer.destroy() auch mixer.forceRefresh(), aber es funktioniert nicht.
Jede Idee und Hilfe wäre willkommen.
Dank
Ok danke Jordan – kodcu