b-nav-item 中的 v-for 未呈现

Question

这很奇怪但很简单:

我有一个来自 bootstrap-vue 的导航栏 b-nav，我想在其中填充动态 b-nav-item。我的 vuejs 组件的模板如下所示：

<template>
  <b-nav vertical class="px-2">
    <b-nav-item
      v-for="application in applications"
      :key="application.id"
      to="#">
      {{ application.verboseName }}
    </b-nav-item>
    <b-nav-item :to="{ name: 'BaseSettings' }">
      <font-awesome-icon :icon="['fas', 'cogs']" class="fa-fw mr-1"/>
      Settings
    </b-nav-item>
  </b-nav>
</template>

第二个 b-nav-item 是静态的，但第一个应该用 applications 动态填充，我在我的组件中像这样检索它：

<script>
  // ...
  apollo: { applications: INSTALLED_APPLICATIONS_QUERY },
  // ...
</script>

问题是它根本不起作用。我已经完成了其他列表，其中填充了 graphql 在其他组件中检索到的内容，并且工作正常。此外，当我尝试提供一些本地数据来测试它时：

data () {
  return {
    apps: [ // used for tests
      { id: '1', verboseName: 'Test1' },
      { id: '2', verboseName: 'Test2' },
      { id: '3', verboseName: 'Test3' },
      { id: '4', verboseName: 'Test4' }
    ]
  }
}

<b-nav vertical class="px-2">
  <b-nav-item
    v-for="application in apps"
    :key="application.id"
    to="#">
    {{ application.verboseName }}
  </b-nav-item>
  ...
</b-nav>

它工作得很好......当我在我的应用程序的 /graphql 界面上尝试我的 graphql 查询时，它 returns 也正确地需要数据。我承认这次我不知道去哪里看..

Answer 1

好吧，几个小时后我突然有了某种启发，我注意到了一些我没有意识到的事情：

使用 apollo 填充数据时，我们放置数据的变量必须使用下面调用的查询的名称。

所以我想做的是： apollo: { applications: INSTALLED_APPLICATIONS_QUERY } 而我的查询是：

const INSTALLED_APPLICATIONS_QUERY = gql`
  query {
    installedApplications {
      id
      verboseName
    }
  }
`

所以我必须做的是 apollo: { installedApplications: INSTALLED_APPLICATIONS_QUERY }。我没有意识到这一点，很有趣的是，在我所有的其他组件中，我都是在不知不觉中做到的。

b-nav-item 中的 v-for 未呈现

v-for in b-nav-item not rendering

vue.js

bootstrap-vue

vue-apollo

graphene-django