Access other component data and method from another component

Question

I have two components:

ContainerSidebar.vue


    
      
        
      
      {{profile.email}}
      
        
          
          Beranda
        
        
          
          Profil Saya
        

        
          
            
          Kelas Saya
          
            
            Jadwal Webinar
          
          
            
            Sertifikat Saya
          
        



        
          
          Katalog Saya
        
        
          
          Ubah Sandi
        

        
          
          Projek Saya
        
        
          
          Panduan
        

        
          
          Keluar

The other one is Profile.vue, which the part i want to show is only the js part

export default {
  data() {
    return {
      page: 'profile',
    };
  },
  methods: {
    change_page(page) {
      this.page = page;
    },
  },

Consider the ContainerSidebar.vue is the parent component and the Profile.vue is the child component. How do i access the change_page() method which manipulate the page data variable on the Profile.vue internally? What i expected from this is to put the change_page() method on this part


   
   Ubah Sandi

which uses @click event. I found a several example in here as such Access data from another Component but i still couldn't figure out the similarity as my own code.

Vicky Sultan · Accepted Answer

Solved this with Vuex:

store.js


    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store({
      state: {
        profile_page: 'profile',
      },
      mutations: {
        changePage(state, page) {
          state.profile_page = page;
        }
      },
    });
    
    export default store

And then commit the state on both parent and child component, i made a method with the commit statement inside the method:

    changePage(page) {
       this.$store.commit('changePage', page);
    },

and add a click event afterwards inside the html tag like this:


    @click="changePage("page_name")"

Problem solved.

Access other component data and method from another component

Answers (2)

Related Questions