Порядок выполнения пропов компонентов VueJS

Я использую в своем проекте vuejs и vue-apollo.

У меня есть компоненты: GroupList и GroupForm

Дело в том, что я сначала попадаю в список, а затем, когда я нажимаю на одну из групп, я попадаю в представление формы этой группы. Для этого у меня есть кнопка, которая открывает представление формы, задавая id этой группы:

openGroupFormView (group, index) {
  this.$router.push({ name: 'GroupFormView', params: { groupId: group.id } })
}

Раньше я передавал объект группы как параметр, и это работало, но я передумал, и теперь я хочу передать id, чтобы при открытии компонента GroupForm запрос graphql для извлечения этой группы на основе id выполнялся выполнен. Я хочу сделать это, чтобы избежать несоответствий apollo-cache в случае, если кто-то тем временем редактировал ту же группу.

Итак, в моем GroupForm компоненте у меня есть:

Моя опора:

props: {
  groupId: Number
}

Мой компонентный запрос:

apollo: {
  group: {
    query: GROUP_QUERY,
    variables () {
      return {
        id: this.groupId
      }
    },
    ..
}

Связанный запрос под этим:

const GROUP_QUERY = gql`
  query ($id: ID) {
    group (id: $id) {
      id
      name
      usersCount
      userIds {
        id
        username
      }
    }
  }
`

Моя проблема в том, что в data () моего компонента я использовал группу, которую я передал через реквизиты, как объект. Я все еще хочу что-то делать в группе, но часть apollo выполняется после части data (), поэтому у меня неопределенная проблема. Как я могу гарантировать, что эта проблема не возникнет? Я имею в виду, что сначала выполняется запрос apollo.

Мой блок data ():

data () {
  return {
    form: {
      name: this.group === undefined ? '' : this.group.name
    }
  }
},

Заранее спасибо за помощь !

РЕДАКТИРОВАТЬ: часть моего шаблона

  <b-form>
    <b-form-group label="Name">
      <b-form-input
        type="text"
        v-model="form.name"
        required
        :disabled="!editing"/>
    </b-form-group>
    <div v-if="editing" class="mb-3">
      <b-button @click="cancelEdit()">Cancel</b-button>
      <b-button @click="group === undefined ? createGroup() : updateGroup(group)" variant="success">Save</b-button>
    </div>
  </b-form>

javascript vue.js vuejs2 apollo vue-apollo
person lbris    schedule 18.02.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я не использую Apollo, но похоже, что вы можете инициализировать name пустой строкой, а затем использовать хук result, чтобы установить его, когда запрос завершится.

Не проверено:

apollo: {
  group: {
    ...
    result({ data, loading, networkStatus }) {
      this.form.name = data.name // something like this
    }
  }
}
person Dan    schedule 18.02.2020
comment
Хорошо, я протестировал это, и он работает .. Но у меня есть ощущение, что я пытаюсь найти обходной путь ... Более того, крючок result пересекается дважды, и я не знаю почему. При первом пересечении данные не определены. И тогда все в порядке. - person lbris; 18.02.2020
comment
Кажется, что тот факт, что он вызывается дважды, связан с тем, что я использовал глобальную опцию fetchPolicy: 'cache-and-network'. Использование fetchPolicy: 'network-only' решает эту часть проблемы. Но у меня все еще есть чувство, что здесь нужно использовать обходной путь. - person lbris; 18.02.2020
comment
Очевидно, что это не обходной путь, поскольку он использует ловушку только в соответствии с официальными документами < / а>. Возможно, есть несколько способов сделать это, хотя нет причин думать, что это проблема. Если вы хотите отредактировать свой вопрос, чтобы показать свой шаблон и то, как вы используете данные Apollo в своем шаблоне, возможно, я смогу внести другое предложение. Возможно, вам вообще не нужно свойство name. - person Dan; 18.02.2020
comment
Я добавил часть своего шаблона (часть с формой). - person lbris; 18.02.2020
comment
Опять же, я не использую Apollo, но, похоже, вы сможете использовать group.name вместо form.name в шаблоне. Если вы должны использовать form по другим причинам (например, потому что вы собираетесь отправить его), лучшего предложения нет, потому что вам нужен способ скопировать group в form, и нет лучшего места для этого, чем хук result . - person Dan; 18.02.2020
comment
По некоторым причинам мне нужна форма, но проблема не в этом ^^. Что ж, я адаптирую свой код, чтобы использовать этот обработчик результатов повсюду в моем приложении, чтобы иметь возможность применять этот механизм для каждого представления формы, которое у меня есть. Спасибо, чувак, это было полезно. - person lbris; 18.02.2020