'Isotope filter is not working in Vue Laravel
First of all I'm new in Vue. I'm trying to use Isotope in Vue component in Laravel.
The code is working fine in HTML. Here are the working codes
main.js
if ($('.grid').length) {
var $grid = $('.grid').isotope({
itemSelector: '.element-item',
gutter: 30,
});
// bind filter button click
$('.maan-button-group').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
$grid.isotope({
filter: filterValue,
});
});
// change is-active class on buttons
$('.maan-button-group').each(function (i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'button', function () {
$buttonGroup.find('.is-active').removeClass('is-active');
$(this).addClass('is-active');
});
});
}
_project.blade.php
<section class="maan-project-area">
<div class="container-fluid">
<div class="row align-content-center justify-content-between">
<div class="col-12 col-md-9">
<div class="maan-button-group text-center">
<button type="button" data-filter="*">All
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".trending">Trending items
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".wordpress">WordPress
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".html">HTML
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".code">Code
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".ui">UI Templates
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
</div>
</div>
<div class="col-md-3 d-none d-md-block">
<div class="maan-view-btn">
<a href="product.html">View All <i class="fas fa-angle-right fa-sm"></i></a>
</div>
</div>
</div>
<div class="row grid">
<div class="col-md-6 col-lg-4 col-xl-3 project-grid-item element-item trending">
<div class="maan-project-item">
<div class="project-img">
<a href="{{ route('product','the-slug') }}"> <img src="{{ asset('assets/front/images/project/project.png') }}"
alt="Image"></a>
<span class="project-category">Trending</span>
</div>
<div class="maan-content">
<ul class="category">
<li>
<a class="product-category" href="">WordPress</a>
</li>
<li>
<a class="product-sub-category" href="">Ecommerce</a>
</li>
</ul>
<h3 class="maan-title"><a href="product-details.html">Sala - Startup & SaaS WordPress</a></h3>
<ul class="review">
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fas fa-star"></i></a>
</li>
<li>
(47)
</li>
</ul>
<div class="project-price">
<div class="sales">Sales : <span>125</span></div>
<div class="price"><del>$69</del> <span>$49</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 project-grid-item element-item html">
<div class="maan-project-item">
<div class="project-img">
<a href="product-details.html"> <img src="{{ asset('assets/front/images/project/project.png') }}"
alt="Image"></a>
<span class="project-category">Trending</span>
</div>
<div class="maan-content">
<ul class="category">
<li>
<a class="product-category" href="">WordPress</a>
</li>
<li>
<a class="product-sub-category" href="">Ecommerce</a>
</li>
</ul>
<h3 class="maan-title"><a href="product-details.html">Sala - Startup & SaaS
WordPress</a></h3>
<ul class="review">
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fas fa-star"></i></a>
</li>
<li>
(47)
</li>
</ul>
<div class="project-price">
<div class="sales">Sales : <span>125</span></div>
<div class="price"><del>$69</del> <span>$49</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 project-grid-item element-item code">
<div class="maan-project-item">
<div class="project-img">
<a href="product-details.html"> <img src="{{ asset('assets/front/images/project/project.png') }}"
alt="Image"></a>
<span class="project-category">Trending</span>
</div>
<div class="maan-content">
<ul class="category">
<li>
<a class="product-category" href="">WordPress</a>
</li>
<li>
<a class="product-sub-category" href="">Ecommerce</a>
</li>
</ul>
<h3 class="maan-title"><a href="product-details.html">Sala - Startup & SaaS
WordPress</a></h3>
<ul class="review">
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fas fa-star"></i></a>
</li>
<li>
(47)
</li>
</ul>
<div class="project-price">
<div class="sales">Sales : <span>125</span></div>
<div class="price"><del>$69</del> <span>$49</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 project-grid-item element-item ui">
<div class="maan-project-item">
<div class="project-img">
<a href="product-details.html"> <img src="{{ asset('assets/front/images/project/project.png') }}"
alt="Image"></a>
<span class="project-category">Trending</span>
</div>
<div class="maan-content">
<ul class="category">
<li>
<a class="product-category" href="">WordPress</a>
</li>
<li>
<a class="product-sub-category" href="">Ecommerce</a>
</li>
</ul>
<h3 class="maan-title"><a href="product-details.html">Sala - Startup & SaaS
WordPress</a></h3>
<ul class="review">
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fas fa-star"></i></a>
</li>
<li>
(47)
</li>
</ul>
<div class="project-price">
<div class="sales">Sales : <span>125</span></div>
<div class="price"><del>$69</del> <span>$49</span></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4 col-xl-3 project-grid-item element-item wordpress">
<div class="maan-project-item">
<div class="project-img">
<a href="product-details.html"> <img src="{{ asset('assets/front/images/project/project.png') }}"
alt="Image"></a>
<span class="project-category">Trending</span>
</div>
<div class="maan-content">
<ul class="category">
<li>
<a class="product-category" href="">WordPress</a>
</li>
<li>
<a class="product-sub-category" href="">Ecommerce</a>
</li>
</ul>
<h3 class="maan-title"><a href="product-details.html">Sala - Startup & SaaS
WordPress</a></h3>
<ul class="review">
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a class="is-active" href="#"><i class="fas fa-star"></i></a>
</li>
<li>
<a href="#"><i class="fas fa-star"></i></a>
</li>
<li>
(47)
</li>
</ul>
<div class="project-price">
<div class="sales">Sales : <span>125</span></div>
<div class="price"><del>$69</del> <span>$49</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Above codes are working.
Now I'm trying to do this with VueJS.
First, I've install isotope from their official site with npm
npm install isotope-layout
Then I've create this vue component file
project.vue
<template>
<!-- Project Area -->
<section class="maan-project-area">
<div class="container-fluid">
<div class="row align-content-center justify-content-between">
<div class="col-12 col-md-9">
<div class="maan-button-group text-center">
<button type="button" class="is-checked" data-filter="*">All
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".trending">Trending items
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".wordpress">WordPress
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".html">HTML
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".code">Code
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
<button type="button" data-filter=".ui">UI Templates
<div class="maan-dotted">
<span></span>
<span></span>
<span></span>
</div>
</button>
</div>
</div>
<div class="col-md-3 d-none d-md-block">
<div class="maan-view-btn">
<a href="#">View All <i class="fas fa-angle-right fa-sm"></i></a>
</div>
</div>
</div>
<div class="project-grid">
<div class="project-grid-item mix trending" v-for="project in projects">
<div class="maan-project-item">
<div class="project-img">
<a href="project/the-slug"> <img src="assets/front/images/project/project.png" alt="Image"></a>
<span class="project-category">{{ project.category.name }}</span>
</div>
<div class="maan-content">
<h3 class="maan-title"><a href="product-details.html">{{ project.name }}</a></h3>
<div class="author">
<img src="assets/front/images/author/author.png" alt="">
<div>by <span class="font-medium">Maan Theme</span> in {{ project.category.name }}</div>
</div>
<div class="project-price">
<div class="sales">Sales : <span>{{ project.total_sale }}</span></div>
<div class="price">Price : <span>${{ project.regular_price }}</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Project Area -->
</template>
<script>
import Isotope from "isotope-layout"
export default {
components: {
Isotope,
},
data: function(){
return {
projects : [],
}
},
mounted() {
this.loadProjects();
this.filterProjects();
},
methods: {
loadProjects : function(){ //this function is working, projects are loading from database
axios.get('api/projects')
.then((response)=>{
this.projects = response.data.projects
})
.catch(function(error){
console.log(error)
});
},
filterProjects : function(){
const $grid = $('.grid').isotope({
itemSelector: '.element-item',
gutter: 30,
});
// bind filter button click
$('.maan-button-group').on('click', 'button', function () {
var filterValue = $(this).attr('data-filter');
$grid.isotope({
filter: filterValue,
});
});
// change is-active class on buttons
$('.maan-button-group').each(function (i, buttonGroup) {
var $buttonGroup = $(buttonGroup);
$buttonGroup.on('click', 'button', function () {
$buttonGroup.find('.is-active').removeClass('is-active');
$(this).addClass('is-active');
});
});
}
}
}
</script>
I've an error in console
Uncaught TypeError: $(...).isotope is not a function
I don't know my question is well structured or not. Ask my if you need any additional information.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|