tengo una duda con web en vue js.
Estoy usando Isotope para organizar las vistas de la seccion de proyectos como una grid. Tengo la estructura basica del grid y adentro unos items, todo normal y basico.. de hecho me estaba funcionando todo correctamente hasta que deje de usar datos locales.
Intente hacer la inicializacion de mi isotope al final de la query a ver si habia algun cambio pero nada.
Alguien me dice que tengo que hacer? Pienso que es porque cuando hago la inicializacion de isotope aun no estan construidas los elementos en html y por esto pasa esto, no quiero usar un timeover
en mi mounted
tengo esto
var elem = document.querySelector('.grid');
var iso = new Isotope( elem, {
// options
itemSelector: '.item',
});
const links = document.querySelectorAll('#categorias a');
links.forEach(element => {
element.addEventListener('click', event => {
event.preventDefault();
links.forEach(link => link.classList.remove('activo'));
event.target.classList.add('activo')
const category = event.target.innerHTML.toLowerCase();
category === 'all' ? iso.arrange({filter: '*'}) : iso.arrange({filter: `.${category}`})
});
});
y mi grid lo tengo asi, el cual como dije antes ya esta todo bien con eso porque con datos locales funcionaba pero cuando esta items null, porque jalo datos de la base de datos no funciona correctamente
<section class="grid" id="grid">
<div class="item" :class="item.category" v-for="(item, index) in items" :key="index" :data-category="item.category" :data-description="item.description">
<div class="item-content position-relative">
<img src="https://cdnimg.webstaurantstore.com/uploads/seo_category/2019/5/table-dining-sets.jpg" alt="image">
<div class="work-detail" @click="showImg(index)">
<div class="content">
<h5 class="text-light title mb-0">
{{item.get('title')}}
</h5>
<small class="text-light">
{{item.get('description')}}
</small>
</div>
</div>
</div>
</div>
</section>