响应性在 Vue 组件中不起作用

问题描述

我正在 Laravel + Vue 旅游网站开发项目。

当我将 html 页面分解成 vue 组件块时，我的网页的响应速度不理想。

下面是纯粹从laravel的blade文件加载页面时的截图：

以上输出代码：listing.blde.PHP

... </div>          
    </section>
    <section>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="other-deals owl-carousel" id="quicklink">
                        <div class="item otherdeals">
                            <a href="#">
                                <p>Amusment Park</p>
                                <img src="assets/images/amusmentpark.png">  
                            </a>    
                        </div>
                        <div class="item otherdeals">
                            <a href="#">
                                <p>Gardens,Zoo Aquariums</p>
                                <img src="assets/images/gardenszoo.png">    
                            </a>        
                        </div>
                        <div class="item otherdeals">
                            <a href="#">
                                <p>Iconic Structures & Buldings </p>
                                <img src="assets/images/iconic.png">    
                            </a>
                        </div>
                        <div class="item otherdeals">
                            <a href="#">
                                <p>Day Trips & Tours</p>
                                <img src="assets/images/daytrip.png">   
                            </a>    
                        </div>
                        <div class="item otherdeals">
                            <a href="#">
                                <p>Live Show & Concerts</p>
                                <img src="assets/images/liveshow.png">  
                            </a>    
                        </div>
                        <div class="item otherdeals">
                            <a href="#">
                                <p>Amusment Park</p>
                                <img src="assets/images/amusmentpark.png">  
                            </a>
                        </div>
                    </div>  
                </div>
            </div>
        </div>      
    </section>.....

以下是我创建上图中突出显示部分的组件时的屏幕截图：

以上输出代码：listing.blade.PHP

...</section>

<themefilter></themefilter>

...<section>

themefilter.vue:

<template>
    <div>

        <section>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="other-deals owl-carousel" id="quicklink">
                        <div class="item otherdeals">
                            <a href="#">
                                <p>Amusment Park</p>
                                <img src="assets/images/amusmentpark.png">  
                            </a>    
                        </div>
                        <div class="item otherdeals">
                            <a href="#">
                                <p>Gardens,Zoo Aquariums</p>
                                <img src="assets/images/gardenszoo.png">    
                            </a>        
                        </div>
                        <div class="item otherdeals">
                            <a href="#">
                                <p>Iconic Structures & Buldings </p>
                                <img src="assets/images/iconic.png">    
                            </a>
                        </div>
                        <div class="item otherdeals">
                            <a href="#">
                                <p>Day Trips & Tours</p>
                                <img src="assets/images/daytrip.png">   
                            </a>    
                        </div>
                        <div class="item otherdeals">
                            <a href="#">
                                <p>Live Show & Concerts</p>
                                <img src="assets/images/liveshow.png">  
                            </a>    
                        </div>
                        <div class="item otherdeals">
                            <a href="#">
                                <p>Amusment Park</p>
                                <img src="assets/images/amusmentpark.png">  
                            </a>
                        </div>
                    </div>  
                </div>
            </div>
        </div>      
    </section>

    </div>
</template>

<script>
export default {

    name: 'themefilter',props : [],data: function(){

    },methods:{
        applyCarousel:function(){

            var t = this;

            $('#quicklink').owlCarousel({
                loop: true,items:1,margin: 5,dots: false,stagePadding: 0,nav: true,navText: ['<span aria-label="PrevIoUs" class="prevslider">&#60;</span>','<span aria-label="Next" class="nextslider">&#60;</span>'],responsive:{
                    0:{
                        items: 1
                    },600:{
                        items: 5
                    },1000:{
                        items: 5
                    }
                }
            });

            
        }
    },mounted() {

        this.applyCarousel();
        
    }
};
</script>

有谁知道我该如何解决这个问题？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）