VueJS同级组件重新加载挑战

Question

我很难弄清楚在更新同级后如何重新加载组件。例如，当我在第一个组件中进行选择时，我希望第二个组件“刷新”以说明新选择的“状态”数据：

<c-select
  dataEndpoint="/states.json"
  errorMessage="Some error message..."
  id="state"
  message="Some message"
  v-model="form.state"
  :v="$v.form.state" />

具有以下依赖性，可以这么说：

<c-select 
  :dataEndpoint="`/${form.state}.json`"
  errorMessage="Some other error message..."
  id="county"
  message="This field uses a local data source and **is required**"
  v-model="form.county"
  :v="$v.form.county" />

选择或更改状态后，我需要“动态”重新加载适当的端点，以在第二个组件中显示该状态的县。目前，使这项工作可行的唯一方法是使用v-if="form.state hack。但是，如果用户尝试再次更改状态，则更改不会在“县”组件中生效。对于如何最好地解决此问题的任何帮助或建议，我们将不胜感激。

这里是link to my vue codebase in Code Sanbox

Answer 1

好的。结果如下：

mounted仅执行一次，因此dataEndpoint更改了未执行的NO UPDATE操作后，这就是为什么应将watch添加到c-list组件中并检查是否有条目已更改-更新下拉列表：

watch: {
    dataEndpoint() {
      this.fetchAndSetJsonEndpoint();
    }
  },

这是您的代码的有效版本：https://codesandbox.io/s/64mj19r6zw