VueJS 组件 prop 执行顺序

Question

我在我的项目中使用 vuejs 和 vue-apollo。

我必须组件：GroupList 和 GroupForm

问题是我首先到达列表，然后当我单击其中一个组时，我到达该组的表单视图。为此，我有一个按钮，通过给出该组的 id 来打开表单视图：

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

过去，我曾经将组对象作为参数传递并且它有效，但我改变了主意，现在我想传递 id 以便在组件 GroupForm 打开时，将执行基于 id 检索此组的 graphql 查询。我想这样做是为了避免 apollo 缓存不一致，以防有人同时编辑同一组。

所以在我的 GroupForm 组件中我有：

My prop :

props: {
  groupId: Number
}

My component query :

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

The associated query beneath that :

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

我的问题是，在我的组件的 data () 中，我曾经使用通过 props 传递的组作为对象。现在，我仍然想在组上做一些事情，但是 apollo 部分在 data () 部分之后执行，所以我有一个未定义的问题。我怎样才能确保这个问题不会发生？我的意思是 apollo 查询是运行 first.

My data() block :

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

在此先感谢您的帮助！

EDIT : A part of my template

  <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>

Answer 1

我不使用 Apollo，但看起来您应该能够将 name 初始化为空字符串，然后在查询完成时使用 result 挂钩对其进行设置。

未测试：

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

VueJS 组件 prop 执行顺序

VueJS components prop execution order

javascript

vue.js

vuejs2

apollo

vue-apollo