Vuejs 以反应方式更新列表

Question

我有两个组件 1.viewAndUpdateDish.vue 2.updateDish.vue

在viewAndUpdateDish，

1. 用户从下拉菜单中选择餐厅
2. 该特定餐厅的菜肴将被过滤出来并加载到餐桌上。

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

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

到目前为止，我所做的是，

1. 在 vuex 商店中创建一个名为 pickRestaurantId 的变量，当用户选择餐厅时，我更新了该 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> 。