Проблемы с VueJS Sibling Component

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. Но если пользователь снова пытается изменить состояние, эти изменения не вступают в силу в компоненте «графство». Буду признателен за любую помощь или совет, как лучше всего решить эту проблему.

Вот ссылка на мою кодовую базу vue в Code Sanbox

Answer 1

Хорошо. Вот результат:

mounted выполняется только ОДИН РАЗ, поэтому после изменения dataEndpoint НЕТ действия UPDATE, поэтому вы должны добавить watch к вашему c-list компоненту и проверить, изменилась ли запись - обновить раскрывающийся список :

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

Вот рабочая версия вашего кода: https://codesandbox.io/s/64mj19r6zw