[Vuejs]-How to import other component on button click vue.js

by

0👍

You want the component selectpersons to be invisible untill someone click a button?
Then do something like this:

<template>
    <div class="detail-project">
      <selectpersons v-show="visible"></selectpersons>
    </div>
    <button v-on:click="selectPerson(param1, param2)"></button>
</template>

export default {
    data: {
        visible: false,
    },
    components: {
        selectpersons
    },
    methods: {
     selectPerson(param1, param2){
         this.visible = true
     },
}

0👍

You can use v-show or v-if for this component depending on your need. v-show adds a css property display: none; and keeps the component in the DOM but it is hidden. v-if does not render and you won’t find it in the DOM until you click on the button.

<selectpersons v-show="showComponent"></selectpersons>
<selectpersons v-if="showComponent"></selectpersons>

<button v-on:click="selectPerson(param1, param2)"></button>

import selectpersons from './ActionDetailProject/selectPerson.vue';
  export default {
  components: {
    selectpersons
  },
  data: {
    showComponent: false,
  },
  methods: {
   selectPerson(param1, param2){
    this.showComponent = true
   },
 }

to learn more about conditional rendering https://v2.vuejs.org/v2/guide/conditional.html

Leave a comment