これは非常に奇妙ですが、単純です:
動的なsb-nav
をbootstrap-vue
入力したいナビゲーションバーがあります。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>
2番目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クエリを試すと、目的のデータも正しく返されます。今回は、どこを見たらいいのかわからないことを認めます..