Vue v-on:click fails to work after build

I am using the example on here Vue slide example

Integrated in my angular template.

When I run ng serve and all works fine, but after I ran ng build and then start it with ng serve or from the dist folder with npm start without have done any code modification the content is loaded but is not possible to change to the next slide clicking on the buttons.

I have found that if I change the id of the main div element in that case <div id="app" changed to <div id="app2" and also in the script el: '#app' to el: '#app2' it will work again but only for the first time too before run ng build.

More details: Looks like that the v-on:click is not called v-on:click=”updateSlide(index)”

On the html side:

 <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>

on the script side:

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; 
        }
    }
});

Any idea why this issue with the element id of the div ?

Thanks!

Answer

Both Angular and Vue want to control the DOM, but they can’t. You have to segregate them, just as you have to do to use jQuery with Vue or Boostrap with Angular, so that only one or the other is controlling any particular bit of the DOM. If Vue is running the show, you would make wrapper components to segregate the Angular bits. If (as it sounds like) Angular is running the show, you will need to make directives to segregate the Vue bits.

Advertisement

Answer