Vueのナビゲーションバーの下にあります。配列を渡すと、メニューが表示されません。
<template>
<div>
<div class="mt-5 px-2">
<li v-for="item in items" :key="item.name">
<a
href="item.link"
class="group flex items-center px-2 py-2 text-base leading-6 font-medium rounded-md text-white bg-gray-900 focus:outline-none focus:bg-gray-700 transition ease-in-out duration-150"
>
<svg
class="mr-4 h-6 w-6 text-gray-300 group-hover:text-gray-300 group-focus:text-gray-300 transition ease-in-out duration-150"
stroke="currentColor"
fill="none"
viewBox="0 0 24 24"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1h3a1 1 0 001-1V10M9 21h6"
/>
</svg>
{{ item.name }}
</a>
</li>
</div>
</div>
<!--
items: [
{ name: 'Foo' },
{ link: 'Bar' }
]
-->
</template>
<script>
export default {
name: 'Nav',
props: ['items'],
data() {
return {
parents: [],
};
},
};
</script>
<style scoped></style>
サンプルデータとして表示するitems-arrayは、テンプレートには適していません。
items-arrayには、2つのオブジェクトが含まれています。1つは単一のプロパティを持ち、もう1つは単一のプロパティnameを持ちますlink。しかし、テンプレートに基づいて、それがあるかのように見えるnameとlink同じオブジェクト、例えばの一部である必要があります：
items: [
{ name: 'Foo1', 'link': 'Bar1' },
{ name: 'Foo2', 'link': 'Bar2' }
]
例のように元の配列が渡さitem.linkれると、最初のオブジェクトが定義されていないためにブラウザのコンソールにエラーが表示され、Vueのレンダリングプロセスが停止する可能性があります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加