0

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!

b.lopes
  • 435
  • 1
  • 7
  • 17
  • It is very probable that Angular and Vuejs don't work together natively. https://github.com/ngVue/ngVue – pirs Dec 03 '17 at 13:26
  • Thanks! I am with Angular 4, maybe is some incompatibility, but it works fine when I change the DIV id of the Vue element and run it from memory with angular `ng serve` only after running `ng build` it fails to work anymore – b.lopes Dec 03 '17 at 13:32
  • You should maybe integrate VueJS directly in Angular, or let Angular dying quietly and pass everything in VueJS ;-) – pirs Dec 03 '17 at 13:35
  • If at least I could find a work around for now would be better.. I am just not getting what happens to the vue div id when `ng build` is running... – b.lopes Dec 03 '17 at 16:10

1 Answers1

2

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.

tony19
  • 125,647
  • 18
  • 229
  • 307
Roy J
  • 42,522
  • 10
  • 78
  • 102