Vuejs обновляет список в реактивной манере

Question

У меня есть два компонента: 1. viewAndUpdateDish.vue 2. updateDish.vue

В viewAndUpdateDish,

1. пользователь выбирает ресторан из выпадающего списка
2. блюд этого конкретного ресторана будут отфильтрованы и загружены на стол.

затем пользователь нажимает кнопку обновления на блюде и переходит к компоненту updateDish.vue и обновляет блюдо. затем, после обновления блюда, пользователь перенаправляется на viewAndUpdateDish

Когда пользователь перенаправляет на viewAndUpdateDish, должен быть выбран ранее выбранный ресторан и загружены блюда.Это мой вариант использования.

До сих пор я делал,

1. , создавая переменную с именем pickRestaurantId в хранилище vuex, и когда пользователь выбирал ресторан, я обновил этот идентификатор.
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>.