I have created a component which have two child components AddContactList and ViewContactLists, Here I need to forceUpdate ViewContactList when new entry inserted from AddContactList component

This is AddContactList components script

<script>   

    export default {
      data() {
        return {
          fields: {},
          errors: {},
          success: false,
          loaded: true,
        }
      },
      methods: {
        submit() {
          if (this.loaded) {
            this.loaded = false;
            this.success = false;
            this.errors = {};
            console.log('Loading..');
            axios.post('/submit', this.fields).then(response => {
              this.fields = {}; //Clear input fields.
              this.loaded = true;
              this.success = true;
              console.log('done..');  
              // --Here I need to update ViewContactList component            
            }).catch(error => {
              this.loaded = true;
              if (error.response.status === 422) {
                console.log(error.response.data.errors)
                this.errors = error.response.data.errors || {};
              }
            });
          }
        },
      },
    }
</script>

This is ViewContactList components script

<script>
    import pagination from 'laravel-vue-pagination'
    export default {
        name:"ContactList",
        components:{
            pagination
        },
        data(){
            return {
                ContactList:{
                    type:Object,
                    default:null
                }
            }
        },
        mounted(){
            this.list()            
        },
        methods:{
            async list(page=1){
                await axios.get(`/getContactLists?page=${page}`).then(({data})=>{
                    this.ContactList = data                    
                }).catch(({ response })=>{
                    console.error(response)
                })
            }
            
        }
    }
</script>

CodePudding user response：

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.

CodePudding user response：

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>