数据未从子组件刷新到父组件

Question

我有一个在链接中添加的子组件。完成后，我调用父组件来获取新链接。

我在v-for 中的链接没有更新。只有当我用新条目重新加载页面时，它们才会更新。提交后，我希望我的子组件通知/调用父母 fetchLinks 函数来更新屏幕上的所有链接（它不会更新，除非我刷新页面）

这是来自 Child AddLinksComponent 的表单成功函数

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

父组件

<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() {

    }
}

Answer 1

在子组件中尝试在任务完成时向父组件发出事件，例如：

 this.$emit('fetch');

在父组件中：

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