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

Posted 2023-02-23

【中文标题】Vue v-on：构建后点击无法工作

【英文标题】：Vue v-on:click fails to work after build

【发布时间】：2018-05-17 00:48:30

【问题描述】：

我在这里使用示例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 会出现这个问题吗？

谢谢！

【问题讨论】：

Angular 和 Vuejs 很可能不能原生地协同工作。 github.com/ngVue/ngVue

谢谢！我使用的是 Angular 4，可能有些不兼容，但是当我更改 Vue 元素的 DIV id 并使用 Angular ng serve 从内存中运行它时，它工作正常，仅在运行 ng build 之后它无法工作了

你或许应该将 VueJS 直接集成到 Angular 中，或者让 Angular 安静地死去，然后在 VueJS 中传递所有内容；-)

如果至少我现在能找到一个解决办法会更好.. 我只是不知道当ng build 运行时 vue div id 会发生什么......

【参考方案1】：

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

【讨论】：

谢谢罗伊！我将尝试遵循这看起来是适当的解决方案。