VueJS Компоненты для заказа - PullRequest
Новая
       73

VueJS Компоненты для заказа

1 голос
/ 18 февраля 2020

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

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

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

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

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

Итак, в моем 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 () {
  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>

1 Ответ

1 голос
/ 18 февраля 2020

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

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

apollo: {
  group: {
    ...
    result({ data, loading, networkStatus }) {
      this.form.name = data.name // something like this
    }
  }
}
...