Data not refreshing from child component to parent

Question

I have a child component that I add in links. Once completed I call the parent component to fetch the new links.

My links in the v-for aren't updating. They are only updating when I reload the page with the new entry. Upon submit, I want my child component to notify/call the parents fetchLinks function to update all the links on the screen (Which its not updating, unless I refresh page)

This is on the form success function from Child AddLinksComponent

// Get the new updated subscriptions 
this.$parent.fetchLinks()

Parent Component

<div class="card card-body" v-for="link in links" v-bind:key="link.id">
   <h2>{{ link.name }}</h2>
</div>

      <add-links></add-links>


export default {
    data() {
        return {
            links: [],
        }
    },
    components: {
       'add-links': AddLinksComponent,
    },
    methods: {
        fetchLinks() {

            fetch('/links/')
            .then(res => res.json())
            .then(res => {
                this.links = res.data
            }).catch(err => {
                console.log('Error', err)
            });
        }
    },
    created() {
        this.fetchLinks();
    },
    mounted() {

    }
}

Boussadjra Brahim Boussadjra Brahim · Accepted Answer · 2019-02-16T15:37:35

In the child component try to emit an event to the parent one when the task is done like :

 this.$emit('fetch');

in the parent component :

 <add-links @fetch="fetchLinks"></add-links>

Data not refreshing from child component to parent

1 Answers