[Vuejs]-Switching out components in vue on a click event

by

0👍

✅

You can do without the view router. In your App.js component you will initialize all your components, and display them or not according to your state.
It would be better to use vuex to manage your store in this case.

So you can do something like this

<component1 v-if="toDisplayComponent1"></component1>
<component2 v-if="toDisplayComponent2"></component2>
...

And into your component use the $store to mutate toDisplayComponent1 …

0👍

There are lots of ways you can handle this. vue-router is certainly possible, but isn’t really necessary for what you’re doing, especially if you don’t want the url updating.

In this example, we have a list of components that you’ll render, and update the component that’s actually rendered by changing the page number.

app.vue

<template>
  <div>
    <h2>This is my Vue App</h2>
    <component :is="componentViews[page]"></component>
    <button v-on:click="updateComponent">Next</button>
  </div>
</template>
<script type="text/javascript">
  module.exports = {
    data: function() {
      return {
        page: 0,
        componentViews: ['start', 'first-video']
      }
    },
    methods: {
      updateComponent: function(){
          this.page += 1;
      }
    }
  };
</script>

Live example here: https://jsfiddle.net/ebbishop/u7dpwv3b/

Leave a comment