Vue v-on：构建后点击无法工作

Question

我在这里使用示例Vue slide example

集成在我的角度模板中。

当我运行ng serve 并且一切正常，但是在我运行ng build 然后使用ng serve 或从带有npm start 的dist 文件夹启动它之后，没有进行任何代码修改，内容被加载但是是点击按钮无法切换到下一张幻灯片。

我发现如果我在这种情况下将主 div 元素的 id 更改为 <div id="app" 更改为 <div id="app2" 并在脚本中将 el: '#app' 更改为 el: '#app2' 它将再次起作用，但只是第一次在运行ng build之前也是如此。

更多细节：看起来 v-on:click 没有被调用 v-on:click="updateSlide(index)"

在 html 方面：

 <div class="pagination-container">
                <span class="pagination-item" 
                    v-for="(slide, index) in slides"
                    v-bind:class="{ active: index === currentSlide }"
                    v-on:click="updateSlide(index)"></span>
            </div>

在脚本方面：

var appVue = new Vue({
    el: '#app',
    data: {
        currentSlide: 0,
        isPreviousSlide: false,
        isFirstLoad: true,
        slides: [ ...]
},
methods: {
        updateSlide: function (index) {
            console.log("move to other slide"); 
            index < this.currentSlide ? this.isPreviousSlide = true : 
this.isPreviousSlide = false;
            this.currentSlide = index;
            this.isFirstLoad = false; 
        }
    }
});

知道为什么 div 的元素 id 会出现这个问题吗？

谢谢！

Answer 1

Angular 和 Vue 都想控制 DOM，但他们不能。您必须隔离它们，就像您必须对 use jQuery with Vue 或 Boostrap with Angular 做的那样，以便只有一个或另一个控制 DOM 的任何特定位。如果 Vue 正在运行该节目，您将使用 wrapper components 来隔离 Angular 位。如果（听起来）Angular 正在运行该节目，您将需要制定指令来隔离 Vue 位。