[Vuejs]-How to forceUpdate sibling component in VueJS

by

0👍

✅

You can simply achieve this by emitting an event on successful save to the parent and then from parent component you can invoke the contact list component method with the help of ref.

Live demo :

Vue.component('childone', {
  props: ['childmsg', 'childOneRef'],
  template: `<p>{{ childmsg }} <button @click="$emit('savesuccess')">Add Contact</button></p>`
});

Vue.component('childtwo', {
  props: ['childmsg', 'childoneref'],
  template: '<p>{{ childmsg }}</p>',
  methods: {
    getupdtedList() {
        console.log('Contact List call');
    }
  }
});

var app = new Vue({
  el: '#app',
  methods: {
    callViewContactListCompMethod() {
        this.$refs.contactListRef.getupdtedList();
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <childone @savesuccess="callViewContactListCompMethod" childmsg="This is a child 1 message">
  </childone>
  <childtwo ref="contactListRef" childmsg="This is a child 2 message">
  </childtwo>
</div>

-1👍

If your parent component is ContactComponent

ContactComponent

|–AddContactList

|–ViewContactList

When you insert contact in add contact list emit the @addList event to the parent component.
Then pass the contact list as a props to ViewContactList.
when the props is changed, the ViewContactList component will be re-rendered automatically.

Leave a comment