VueJS 兄弟组件重载挑战答案

【问题标题】：VueJS Sibling Component Reload ChallengesVueJS 兄弟组件重载挑战
【发布时间】：2019-01-17 16:00:35
【问题描述】：

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

<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

【问题讨论】：

尝试将form.state 移动到计算属性或方法。应该工作。

标签： vuejs2 vue-component

【解决方案1】：

好的。结果如下：

mounted 只执行一次，所以在dataEndpoint 更改后没有执行更新操作，这就是为什么您应该将watch 添加到您的c-list 组件并检查条目是否已更改 - 更新下拉列表：

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

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

【讨论】：

感谢您的帮助。我真的很感激。