Vuejs 以反应方式更新列表

Posted 2023-02-16

【中文标题】Vuejs 以反应方式更新列表

【英文标题】：Vuejs update a list in reactive manner

【发布时间】：2019-10-19 18:41:34

【问题描述】：

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

在viewAndUpdateDish，

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

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

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

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

在 vuex 商店中创建一个名为 pickRestaurantId 的变量，当用户选择餐厅时，我更新了该 ID。 并且在updateDish 组件中，在更新函数的最后，我发出了这样一个事件，this.$root.$emit("clickedUpdate");

然后在 viewAndUpdateDish 组件中我做了

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

但这似乎不起作用！ 如何使用 vuejs 实现这一点？ 希望我的问题对你来说很清楚。

【问题讨论】：

您可能需要一个全球性的地方来存放您的菜肴数据并在多个地方使用 - 您在使用vuex吗？如果不是，我建议管理您的商店 - vuex.vuejs.org

我认为你必须使用全局 vuex 并且你必须在“计算”中编写一个函数。每当任何计算出的依赖变量组件都会自动重新渲染。

如果你只想使用之前状态的组件，我们必须使用 组件

@SatyamPathak 我已经使用 vuex 来保留变量pickRestaurantId

请通过计算并保持活力..我认为通过这些概念可以实现您需要的任何内容..

【参考方案1】：

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

然后在你的父组件上确保你正在监听“clickedUpdate”事件：

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