将mixitup与Vue.js 2.0组件一起使用

Question

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

Answer 1

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.