[Vuejs]-Vue-cli change object value globally

by

0👍

You need to pass the imported dependency (the object or the name of the component as a string) to v-bind:is. You can do this by returning it in a computed function and pass it to a computed property, which you then can use in the template.

<template>
  <div id="app">
    <button v-on:click="isLogin = true">Show Login</button>
    <component v-bind:is="currentComponent"></component>
  </div>
</template>

<script>
import acceuil from './components/acceuil.vue';
import login from './components/login.vue';

export default {
  name: 'app',
  data () {
    return {
      isLogin: false
    };
  },
  computed: {
    currentComponent () {
       return this.isLogin ? login : acceuil;
    }
  },
};
</script>

See also the documentation of dynamic components in the official docs.

Leave a comment