-
Notifications
You must be signed in to change notification settings - Fork 48
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vue 3? #79
Comments
Yeah, Vue 3 support would be awesome! |
vue3 ? |
we want vue 3 version. that would be really awesome!! |
Ah, so this doesn't work with Vue 3, good to know! xD |
is anyone found the alternative for vue3? |
A quick solution for when you need minimal filtering capabilities. Using Vue 3 and Tailwind. <script setup>
// components/QuickIsotope.vue
import {computed, ref} from 'vue';
const catOne = computed(() =>
'https://fakeimg.pl/480x320/C6011F/eae0d0/?retina=1&font=noto&text=1st Cat'
);
const catTwo = computed(() =>
'https://fakeimg.pl/480x320/568203/eae0d0/?retina=1&font=noto&text=2nd Cat'
);
const catThree = computed(() =>
'https://fakeimg.pl/480x320/720e9e/eae0d0/?retina=1&font=noto&text=3rd Cat'
);
const cards = ref([
{
id: 1,
cat: 1,
title: 'Lorem',
href: catOne,
},
{
id: 2,
cat: 2,
title: 'Ipsum',
href: catTwo,
},
{
id: 3,
cat: 3,
title: 'Dolor',
href: catThree,
},
{
id: 4,
cat: 1,
title: 'Sit',
href: catOne,
},
{
id: 5,
cat: 2,
title: 'Amet',
href: catTwo,
},
{
id: 6,
cat: 3,
title: 'Consectetur',
href: catThree,
},
{
id: 7,
cat: 1,
title: 'Adispicing',
href: catOne,
},
{
id: 8,
cat: 2,
title: 'Elit',
href: catTwo,
},
]);
const categories = ref([1, 2, 3]);
const setCategories = (cat = [1]) => {
categories.value = cat;
};
const categoriesSelected = computed(() => {
return cards.value.filter((card) => {
return categories.value.includes(card.cat);
});
});
</script>
<template>
<div class="my-16 p-32 w-full bg-yellow-400">
<button
class="w-24 bg-orange-700 text-white rounded"
@click="setCategories([1, 2, 3])"
>
All
</button>
<button
class="w-24 bg-orange-700 text-white rounded ml-4"
@click="setCategories([1])"
>
Cat 1
</button>
<button
class="w-24 bg-orange-700 text-white rounded ml-4"
@click="setCategories([2])"
>
Cat 2
</button>
<button
class="w-24 bg-orange-700 text-white rounded ml-4"
@click="setCategories([3])"
>
Cat 3
</button>
</div>
<div class="grid grid-cols-4 place-items-center gap-24 w-full mb-32">
<transition-group
enter-active-class="transition duration-150 delay-150 ease-out"
enter-from-class="opacity-0 scale-0"
enter-to-class="opacity-100 scale-100"
leave-active-class="transition duration-150 ease-in"
leave-from-class="opacity-100 scale-100"
leave-to-class="opacity-0 scale-0"
>
<div
v-for="card in categoriesSelected"
:key="card.id"
:id="'card-' + card.id"
class="w-48 h-32 bg-orange-700 rounded-2xl overflow-hidden"
>
<img
:src="card.href"
:alt="card.title"
class="w-full"
/>
</div>
</transition-group>
</div>
</template> |
Hey guys, This is the source code written by chatGpt4 for vue 3. Have a look.
What do you guys think? It should work? |
Is this library still being supported? Will it be on Vue.js 3.0?
The text was updated successfully, but these errors were encountered: