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

我试图在vue.js上使用mixitup，但每次mixitup目标在容器中显示0个元素时。（

mixer.getStatu（）.totalShow

）

下面是我的完整vue.js组件代码

    <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>

菲齐基·盖克勒梅·格罗塞勒里
哈里塔·尤克勒尼约尔

Yükleniyor
蒂姆
{{h.医院名称}
从“vue highcharts”导入VueHighcharts
使用（VueHighcharts，{Highcharts}）
从“mixitup”导入mixitup
导出默认值{
名称：'physicalimagesmap'，
数据（）{
var self=这个；
返回{
mapDataUrl:“/report/hospital city map data”，
mapHcKeyDataUrl:“/report/hospital city detail by hckey”，
地图类型：{'map_statu'：'yatak'}，
医院数据：[]，
混合过滤器：[]，
选项：{
朗：{
下载JPEG:'JPEG Olarakİndir'，
下载PDF:'PDF Olarakİndir'，
下载PNG:‘PNG Olarakİndir’，
下载SVG:“SVG Olarakİndir”，
印刷图：“格拉菲·亚兹德”
},
标题：{
文本：“”
},
副标题:{
文本：“”
},
地图导航：{
启用：对，
按钮选项：{
垂直排列：“底部”
}
},
颜色：['rgba（19,64117,0.05）''rgba（19,64117,0.2）''rgba（19,64117,0.4）'，
"rgba(19,64117,0.5)","rgba(19,64117,0.6)","rgba(19,64117,0.8)",，
图例：{
标题：{
文字：“Yatak Sayısı（Toplam）”，
风格：{
颜色：（Highcharts.theme&&Highcharts.theme.textColor）| |“黑色”
}
},
布局：“垂直”，
对齐：“右”，
浮动：是的，
数值小数：0，
值后缀：“”，
背景颜色：（Highcharts.theme&&Highcharts.theme.legendBackgroundColor）| |“rgba（255，255，255，0.85）”，
符号半径：0，
符号高度：14，
x:0,，
y:20
},
颜色轴：{
数据类：[{
起:0,，
收件人：200
}, {
起：200，
至：500
}, {
起:500,，
至：1000
}, {
起：1000，
至：2000年
}, {
起始日期：2000年，
至：4000
}, {
起：4000，
至：5000
},{
起：6000
}]
},
出口：{
图表选项：{
颜色轴：{
数据类：[
{
发信人:1,，
收件人：200
}, {
起：200，
至：500
}, {
起:500,，
至：1000
}, {
起：1000，
至：2000年
}, {
起始日期：2000年，
至：4000
}, {
起：4000，
至：5000
},{
起：6000
}]
}
}
},
学分：{
已启用：false
},
系列：[{
动画：{
持续时间：1000
},
数据：[]，
mapData:Highcharts.maps['countries/tr/tr all']，
数据标签：{
启用：对，
格式化程序：函数（）{
if（this.point.properties）{
返回此.point.properties['name']；
}
},
格式：空，
风格：{
fontWeight:“粗体”
}
},
joinBy:['hc-key']，
不结盟运动