请检查我提供的链接,我想在通过API将项目添加到表格时刷新表格,并在删除项目时刷新表格。
向表中添加数据的按钮位于子元素中,但显示数据的表位于父组件中,因此我不确定如何单击子元素中的按钮以强制父项重新加载/刷新
https://codesandbox.io/s/pensive-monad-lf402?file=/src/components/HelloWorld.vue (to add an item, must tick the radio button in my UI first)
请检查我提供的链接,我想在通过API将项目添加到表格时刷新表格,并在删除项目时刷新表格。
向表中添加数据的按钮位于子元素中,但显示数据的表位于父组件中,因此我不确定如何单击子元素中的按钮以强制父项重新加载/刷新
https://codesandbox.io/s/pensive-monad-lf402?file=/src/components/HelloWorld.vue (to add an item, must tick the radio button in my UI first)
您无需强制重新加载表,Vue是反应式的,这意味着在更新模型时,视图会自动更新。
Reactivity in Depth
例如,如果要在删除趋势时更新表,则应从模型中删除趋势,而当前您只是在发送api请求。
You can put
this.toptrackTrends = this.toptrackTrends.filter(x => x.ID !== deleteid);
at the bottom of yourDeleteTrend
method, this will filter out any trends that have an ID of deleteid.您可以使用$ emit向您的父元素发送通知。
因此,确认后您可以发送$ emit
并在父组件html中:
handleweAreSure只是一个vue方法,您可以在其中重新加载数据, 或者,您可以向该方法添加一些参数。
https://codesandbox.io/s/ecstatic-beaver-bgm1b
For more information about emit https://vuejs.org/v2/guide/components-custom-events.html#Event-Names
If you have to use a lot of $emits within you application maybe it is worth to look at vuex (https://vuex.vuejs.org/guide/).