Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
trying to resolve vuejs values within alpinejs. i'm able to get data but for example tab = category.slug is not showing actual category slug but still remains 'category.slug'. how do i resolve these?
<div class="col-span-3" x-data="{ tab: root_category_slug }" >
<div class="flex justify-center w-full">
<div class="tab-headings flex item-center space-x-4">
<div
v-for="category in root_category.children"
:key = "category.id"
class="hover:text-primary-900 py-2 px-4 cursor-pointer"
x-bind:class="{'text-primary-900 border-b border-secondary-500': tab == category.slug}"
x-on:click="tab = category.slug"
>
<p v-text="category.name"></p>
</div>
</div>
</div>
</div>
full template file
<v-products-karousel
root="{{ $root }}"
>
</v-products-karousel>
@pushOnce('scripts')
<script type="text/x-template" id="v-products-karousel-template">
<div class="grid grid-cols-4 gap-4 w-full">
<div class="single-banner group h-96 overflow-hidden">
<img :src="root_category.images.banner_url" class="object-fill h-full"/>
<div class="inner-text">
<div class="flex-none text-center">
<p class="text-4xl font-bold text-white uppercase">@{{ root_category.name + "'s" }}</p>
<p class="mb-8 uppercase tracking-wide text-white">Collection</p>
<a :href="root_category.url" class="bg-secondary-500 text-white px-8 py-2 rounded-full group-hover:bg-primary-900 group-hover:text-white font-semibold tracking-wide">Discover More</a>
</div>
</div>
</div>
<div class="col-span-3" x-data="{ tab: root_category_slug }" >
<div class="flex justify-center w-full">
<div class="tab-headings flex item-center space-x-4">
<div
v-for="category in root_category.children"
:key = "category.id"
class="hover:text-primary-900 py-2 px-4 cursor-pointer"
x-bind:class="{'text-primary-900 border-b border-secondary-500': tab === category.slug}"
x-on:click="tab = category.slug"
>
<p v-text="category.name"></p>
</div>
</div>
</div>
<div class="h-full">
<div v-for="(category, index) in root_category.children" :key="index" x-show="tab == 'category.slug'">
<div class="grid grid-cols-3 gap-4 mt-4">
<div v-if="category.items.length > 0">
<x-shop::products.kard
v-for="product in category.items"
>
</x-shop::products.kard>
</div>
<div v-else class="grid col-span-3 items-center justify-items-center place-content-center w-full mx-auto h-[320px] text-center">
<img src="{{ bagisto_asset('images/thank-you.png') }}" alt="placeholder">
<p class="">No products available in this category</p>
</div>
</div>
</div>
</div>
</div>
</div>
</script>
<script type="module">
app.component('v-products-karousel', {
template: '#v-products-karousel-template',
props: [
'root',
'root_category',
'root_category_slug',
],
data() {
return {
root_category: {},
isLoading: true,
products: [],
root_category_slug: '',
};
},
mounted() {
this.getData();
this.getRootCategorySlug();
},
methods: {
getData() {
this.$axios.get(this.root).then(response => {
this.isLoading = false;
this.root_category = response.data.data;
console.log(this.root_category);
}).catch(error => {
console.log(error);
});
},
getRootCategorySlug() {
if (this.root_category && this.root_category.children && this.root_category.children.length > 0) {
this.root_category_slug = this.root_category.children[0].slug;
}
},
},
});
</script>
@endPushOnce
I could be wrong about this, but I don't think the frameworks are meant to be used simultaneously. I'd recommend picking either Vue.js or Alpine.js for your project. This will cut on dependencies as well. Otherwise, you may keep running into different errors.
@ramonrietdijk thanks. i understand what you're saying. what i'm trying to achieve is to show/hide certain divs like tabs when i click on headings. is that possible with vuejs only? if so example code, please
@croftCoder Yes, these things are definitely possible using Vue.js as well.
Simple example:
<script>
export default {
data() {
return {
tab: 1
}
}
}
</script>
<template>
<div>
<nav>
<ul>
<li v-on:click="tab = 1">Tab 1</li>
<li v-on:click="tab = 2">Tab 2</li>
<li v-on:click="tab = 3">Tab 3</li>
<!-- ... -->
</ul>
</nav>
<div>
<div v-if="tab == 1">
<p>This is tab 1</p>
</div>
<div v-if="tab == 2">
<p>This is tab 2</p>
</div>
<div v-if="tab == 3">
<p>This is tab 3</p>
</div>
<!-- ... -->
</div>
</div>
</template>
@ramonrietdijk i get the logic, but trying to implement it in the code above makes the whole template not appear at all. any help?
Please or to participate in this conversation.