How to dynamically change components in VueJS

Question

I want to build an app in vue.js where you can dynamically switch between app views without page reloading. What is the best way to do it? And why this code doesn't work? Thank you!

var View01 = {
    template: `<button @click="swapComponent('view-02')" type="submit">NEXT VIEW</button>`
}
var View02 = {
    template: `<button @click="swapComponent('view-01')" type="submit">BACK TO PREVIOUS VIEW</button>`
}

var vm = new Vue({
    el: '#app',
    data: {
        currentComponent: 'view-01'
    },
    components: {
        'view-01': View01,
        'view-02': View02,
    },
    methods: {
        swapComponent: function(component) {
            this.currentComponent = component;
        }
    }
})

Answer 1

You're trying to call a parent method from the child components. You need to pass the method as a prop so it is in the child's scope.

var View01 = {
  template: `<button @click="swapComponent('view-02')" type="submit">NEXT VIEW</button>`,
  props: ['swapComponent']
}
var View02 = {
  template: `<button @click="swapComponent('view-01')" type="submit">BACK TO PREVIOUS VIEW</button>`,
  props: ['swapComponent']
}

var vm = new Vue({
  el: '#app',
  data: {
    currentComponent: 'view-01'
  },
  components: {
    'view-01': View01,
    'view-02': View02,
  },
  methods: {
    swapComponent: function(component) {
      this.currentComponent = component;
    }
  }
})

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<div id="app">
  <div :is="currentComponent" :swap-component="swapComponent"></div>
</div>