Vue.js以反应方式更新列表

Question

我有两个组成部分 1. viewAndUpdateDish.vue 2. updateDish.vue

在viewAndUpdateDish中，

1. 用户从下拉菜单中选择一家餐馆
该特定餐厅的
2. 菜肴将过滤掉并加载到桌子上。

1. 然后，用户点击盘子上的更新按钮，然后转到updateDish.vue组件并更新盘子。
2. 然后在他更新菜品用户后将其重定向到viewAndUpdateDish

当用户重定向到viewAndUpdateDish时，应选择先前选择的餐厅并加载菜肴。这是我的用例。

到目前为止，我所做的是

1. 在vuex商店中创建一个名为pickedRestaurantId的变量，当用户选择一家餐馆时，我会更新该ID。
2. 在更新功能末尾的updateDish组件中，我发出了一个这样的事件，this.$root.$emit("clickedUpdate");

3. 然后在viewAndUpdateDish组件中完成

   mounted() {
    this.$root.$on("clickedSomething", () => {
    this.loadDishes(this.pickedResViewAndUpdateDish);
   });
   },
   

但这似乎不起作用！ 如何使用vuejs做到这一点？ 希望我的问题对您清楚。

Answer 1

在更新逻辑之后，在“ viewAndUpdateDish”组件上，您可以执行以下操作： this.$emit('clickedUpdate',yourResturantId);

然后在父组件上确保您正在侦听“ clickedUpdate”事件：

<update-dish @clickedUpdate="loadDishes($event)"></update-dish>。