CODEWITHSUNDEEP
vue.js
Mukun
Mukun

Reputation: 157

Is it possible to call a function in one vue component from another vue component?

LogoutModal.vue

<template>
  <div class="modal LogoutModal" v-bind:class="{'is-active':confirmLogout}">
    <div class="modal-background"></div>
    <div class="modal-content">
    </div>
    <button class="modal-close is-large" aria-label="close" @click="closeModal"></button>
  </div>
</template>

<script>
export default {
  name: "LogoutModal",
  data() {
    return {
      confirmLogout: false
    };
  },
  methods: {
    closeModal: function() {
      this.confirmLogout = false;
    },
    showModal: function() {
      this.confirmLogout = true;
    }
  }
};
</script>

Navigation.vue

<template>
  <aside class="menu">
<ul class="menu-list">
      <li>
        <a @click="showModal">Logout</a>
      </li>
    </ul>
    <LogoutModal />
  </aside>
</template>

<script>
import LogoutModal from "@/components/LogoutModal.vue";
export default {
  name: "Navigation",
  components: {
    LogoutModal
  }
};
</script>

I want to call the showModal function when i click on the Logout link. How can i achive that? Or is that possible to change the variable in LogoutModal.vue from Navigation.vue. I have a variable called confirmLogout in LogoutModal.vue it has to be updated from Navigation.vue. How can I do that?

Upvotes: 0

Views: 59

Answers (2)

Keimeno
Keimeno

Reputation: 2644

You could define a dynamic property in LogoutModal, that sets it's state. Here's more about that: https://v2.vuejs.org/v2/guide/components-props.html

Upvotes: 1

squareborg
squareborg

Reputation: 1621

You should have confirmLogout in the navigation component, then pass that into your modal, you will also need a way to close the modal so in your modal you should this.$emit('close') when your user has signaled they want to close it.

<LogoutModal :open="confirmLogout" @close="confirmLogout=false" />

In your logout modal add a prop

<script>
export default {
  name: "LogoutModal",
  props: ['open'],
...

then in the template 

  <div class="modal LogoutModal" v-bind:class="{'is-active':open}">

Upvotes: 1

Related Questions