Question

在了解vue如何与其他js库一起使用时，我需要一些帮助。例如，我有一个网页使用称为owl carousel的JavaScript库返回图像的轮播。如果我通过为每个图像添加HTML然后在服务器上呈现html，然后将其发送，则轮播会按预期工作。但是，如果改为使用Vue在客户端上对这些图像进行请求（在安装之前），然后渲染它们，则轮播无法正常工作。似乎与以下事实有关：猫头鹰轮播脚本没有在加载Vue.js方式时添加需要添加的div。我想知道为什么会这样吗？特别是考虑到vue脚本位于文档的中间，而owl-carousel脚本位于底部，因此在vue脚本之后执行。我认为这与owl-carousel和vue有关的问题较少，而与任何不包含vue的js库有关的vue一样多。

这是使用把手在服务器上呈现html的工作代码：

{{#each locations}}

                    <!-- Item -->
                    <div class="col-md-4 col-lg-4 mb-md-10" style="margin-bottom: 20px;">
                        <div @mouseover="hover = true" @mouseleave="hover = ''" class="blog-media" style="margin-bottom: 5px;">

                            <el-avatar v-if="hover == true" class="like-button"><i class="fa fa-heart"></i></el-avatar>

                            <ul class="clearlist content-slider">
                                {{#each this.images}}

                                    <li>
                                        <a href="/locations/{{../id}}"><img src="{{this.url}}" alt="" style="object-fit: cover; height:240px;"/></a>
                                    </li>
                                {{/each}}

                            </ul>
                        </div>
                        <span style="color:gray; display: inline-block; float:  left; padding-left: 5px;">{{this.locationReference}}</span>

                        <span style="color:black; font-weight: bold; display: inline-block; float: right; padding-right: 5px;"> London</span>

                    </div>
                {{/each}}

这将导致工作输出：

vue.js渲染不起作用：

<div v-if="!loading" v-for="location in locations" class="col-md-4 col-lg-4 mb-md-10" style="margin-bottom: 20px;">
                    <div @mouseover="hover = true" @mouseleave="hover = ''" class="blog-media" style="margin-bottom: 5px;">

                        <el-avatar v-if="hover == true" class="like-button"><i class="fa fa-heart"></i></el-avatar>

                        <ul class="clearlist content-slider">

                                <li v-for="image in location.images">
                                    <a href="/locations/"><img :src="image.url" alt="" style="object-fit: cover; height:240px;"/></a>
                                </li>

                        </ul>
                    </div>
                    <span style="color:gray; display: inline-block; float:  left; padding-left: 5px;">\{{location.locationReference}}</span>
                    <span style="color:black; font-weight: bold; display: inline-block; float: right; padding-right: 5px;"> London</span>

                </div>

如果有人可以帮助启发我对脚本如何协同工作的误解，我将不胜感激。

Vue.js为什么不能与其他一些JavaScript库一起使用

0 个答案: