Question

集成在我的角度模板中。

当我运行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-上：点击=＆＃34; updateSlide（指数）＆＃34;

在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正在运行show，你需要制作指令以隔离Vue位。

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

1 个答案: