I lately get a project with Nuxt.js and facing some problems with it. I have a component that gets some products from an API and gets them from Vuex. Each product may have an array of children and each child may have an array of children and so on.
import Images from '@/components/products/Images'
import { mapGetters } from 'vuex'
export default {
components: {
Images
},
data () {
return {
images: [],
options: {
width: 300,
padding: {
2: 8,
default: 12
}
}
}
},
computed: {
...mapGetters({
products: 'getProducts'
})
},
mounted () {
this.images = this.products.filter(
item => item.slug === this.$route.params.slug
)
}
}<template>
<div class="container_pic">
<div class="flow-root">
<div
v-for="(item, index) in images"
:key="index"
class="w-full md:p-4 py-4"
>
<h6 class="text-lg mt-6 mb-8">
{{ item.title }}
</h6>
<Images
:item="item"
:slug="true"
:childs="item.childs"
large
/>
</div>
</div>
</div>
</template>Products data can be like this:
products: {
{ id: 1, childs: [], title: "title 1" },
{ id: 2, childs: [
{ id: 3, childs: [], title: "title 3" },
{ id: 4, childs: [
{ id: 5, childs: [
{ id: 6, childs: [], title: "title 6" },
], title: "title 5" },
], title: "title 4" },
], title: "title 2" }
}What I need is each time user clicks on the image component, If the product has childs item and the length of it was bigger than 0 redirect the child to the current route and get the children array.
Not sure if I understand it properly, but you may have a recursive route, right?
Nuxt's Unknown Dynamic Nested Routes may help here IMO: https://nuxtjs.org/docs/2.x/features/file-system-routing#unknown-dynamic-nested-routes
If you organize your pages like this
pages/
--| people/
-----| _id.vue
-----| index.vue
--| _.vue
--| index.vue
You'll get the following routes
/ -> index.vue
/people -> people/index.vue
/people/123 -> people/_id.vue
/about -> _.vue
/about/careers -> _.vue
/about/careers/chicago -> _.vue