My single page website has a simple component structure:
<template>
<div id="app">
<header />
<section-about />
<section-warranty />
<section-advantages />
<section-service />
<section-review />
<footer />
<menu />
</div>
</template>
Now, I want to populate the menu component with a list of all web page blocks (article sections).
https://i.sstatic.net/jl1INt.jpg
I could manually write this list, but I'm exploring the possibility of parsing my components for a specific key and generating the list automatically. This way, my menu will be dynamically updated as I add or remove article components.
For example, the Warranty.vue component:
<template>
<section class="article warranty">
...blah blah blah...
</section>
</template>
<script>
export default {
data() {
return {
article-key: 'warranty', // <-- key for parsing
article-title: 'Warranty'
}
}
}
</script>
Similarly, other article components would follow suit...
Next, in my Menu.vue component:
<template>
<ul class="menu">
<li v-for="(article, index) in articles" :key="index">
<a href="#">{{ article.title }}</a>
</li>
</ul>
</template>
<script>
export default {
data() {
return {
articles: []
}
},
methods: {
parseComponents() {
this.articles = ... <-- iterate through Vue components and return those with an article-key
}
},
created() {
parseComponents()
}
}
</script>
Alternatively, should I consider moving all articles to a separate folder? Is there a way to achieve this with Vue?