将VUE组件与Ajax调用和2路绑定结合起来

Question

我将构建一个VUE组件，该组件用作一个Form-Widget，以从树状结构中选择一个对象。

它应该由4个下拉列表组成，这些下拉列表由REST-API动态填充，该REST-API返回给定节点的子节点。

最终的组件本身应负责向API发出请求，并最终应接收/发出单个obj_id值。

我将其分解为两个嵌套的组件：

• 单个：表示一个单独的选择/下拉列表，它接收parent_id作为道具，并通过v-model进行2路数据绑定，以接收/发出一个该父对象的子对象... 这很好

• 组合组件，包括“链接”在一起的四个单个组件（从下一个obj_id到parent_id）

像这样：

app[obj_id]
  combined[obj_id,a,b,c,d]          --> REST API: get_abcd(obj_id) => a,b,c,d
     single[parent_id,items,obj_id]  --> REST API: get_childs(parent) => items
     single[parent_id,items,obj_id]  --> REST API: get_childs(parent) => items
     single[parent_id,items,obj_id]  --> REST API: get_childs(parent) => items
     single[parent_id,items,obj_id]  --> REST API: get_childs(parent) => items

我已经设法使其在两个方向上都能正常工作，但是我正努力使其在 两个 方向上都能工作。

两种方式 ：

• a）用户可以通过从左到右更改下拉菜单来选择对象，计算属性从a，b，c，d“计算”所得的obj_id并将其发送到应用程序中的数据绑定
• b）应用程序“设置”绑定的obj_id值，合并后的组件进行REST调用，设置a，b，c，d并相应地更新单个组件

问题 ：

在情况b）中填充子组件时，REST调用稍后会以某些不可预测的顺序解析其诺言，更新下拉列表，并因此发出一些其他/新值，从而改变了所需的组合值。

当一个组件中有多个“运动部件”时，如何避免这些“两向循环”会在填充它们时触发更改？

---

示例，其外观如何，橙色框内的组合组件：