0

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>
11
  • hasta ahora funciona pero si añado un setTimeout, pero me parece una solucion poco eficiente Commented el 2 ago. 2021 a las 20:20
  • si esto es vue, entonces hay un dom virtual.. no deberias hacer nada de lo que estas haciendo, porque no va a funcionar.....
    – gbianchi
    Commented el 2 ago. 2021 a las 20:39
  • @gbianchi puedes explicarme un poco mas? como deberia hacer uso de este dom Commented el 2 ago. 2021 a las 21:06
  • que hasta ahora para no hacer uso del setTimeout, he utilizado MutationObserver para saber cuando se han agregado items dentro del grid... vea esta solucion o el uso de estas innecesarias, pienso que se puede resolver mi problema de otra forma pero no se, puedes decirme como deberia entonces @gbianchi por favor Commented el 2 ago. 2021 a las 21:10
  • esto es vue.. no debes tocar el dom, para nada... todo lo que haces, lo haces en observables dentro del script que vue renderiza donde le decis que lo haga. No se que tratas de hacer, pero creo que deberias revisar de vuelta como funciona vue. No tenes que buscar nada en ningun lado de la pantalla... vue ya sabe donde esta todo lo que le decis que muestre, y si queres cambiar algo (por ejemplo agregar una fila a una grilla), esa grilla sale de un array, y lo unico que tenes que hacer es agregar una fila al array....
    – gbianchi
    Commented el 2 ago. 2021 a las 21:42

1 respuesta 1

1

He resulto mi problema y de la forma que queria :D , sin necesidad de agregar un setTimeout.

El problema radicaba principalmente era porque hacia uso de querySelectors de elementos que aun no estaban contenido en el DOM, es por esto que agregaba el setTimeout en un principio para darle un tiempo de obtener los datos de la db y se construyeran los elementos html para el uso funcional de los querySelectors. Pero esta es una solucion pobre, por eso trate de hacerlo mejor posible, aca esta mi soluciòn, agradeceria bastante que si alguien tiene una soluciòn o una implementacion mas limpia me dijera, pero con un poco mas de detalles por favor..

SOLUCION: resolvi mi problema haciendo uso del método Promise.all(iterable), en mi método loadData, que se llama en el mounted de mi aplicaciòn.

loadData(){
    this.loading = true

    Promise.all([
      this.getBanners(),
      this.getDataProjects(),
      this.getTeam(),
      false
    ])
    .then((values) => {
      [this.banners, this.categoriesProject, this.itemTeam, this.loading] = values;
    })
    .catch(function (error) {
      console.log(error)
    })
  },

siendo getBanners(), getDataProject(), getTeam() promesas que obtendran los datos en mi DB. Entonces con Promise.all(iterable) resulevo estas promesas y asigno los resultados a las respectivas variables que utilizo en todo mi estructura vue para mostrar los datos.

Para terminar, iniciarlizar el Muuri que es lo que me permite utilizar una grid para mis items-imagenes, esto lo hago en el watch para reaccionar un cambio en el DOM de mi variable y asi si hacer uso funcional de los querySelectors que me permitiran hacer todo el trabajo asincrono que queria, sin necesidar de agregar como dije antes tiempo randoms de carga.

Si encuentro maneras mas limpiar de hacer esto ire actualizando la respuesta, pero vamos que ya funciona

EDITO Por cierto ya borre de mi soluciòn el querySelector, ahora simplemente lo que hago es agregar el @click="function" en mi elemento en vue, el cual se crea de manera asincrona con los datos que recupero de mi DB con mis promesas :D. Dejare el codigo final entonces

<!-- project Start -->
  <section class="section" id="project">
    <div class="container">
      <div class="row justify-content-center mt-4 pt-2" data-aos="fade-up">
        <div class="col-12 text-center">
          <div class="section-title">
            <h4 class="title text-uppercase mb-4">
              {{getTitleBanner('project')}}
            </h4>
            <p class="text-muted mx-auto para-desc mb-0">
              {{getDescriptionBanner('project')}}
            </p>
          </div>
        </div>
        <!--  end col -->
      </div>
      <!-- end row -->
      <div class="row justify-content-center mt-4 pt-2" data-aos="fade-up">
        <div class="col-lg-10">
          <div class="text-center">
            <ul class="col container-filter portfolioFilter list-inline list unstyled mb-0" id="filter">
              <li class="list-inline-item mb-2" v-for="(item, index) in categoriesProject" :key="index">
                <a href="javascript:void(0)" @click="filterItems(index)" class="categories pr-4 pl-4 border rounded" :class="{'active' : itemSelected  === index}" data-filter="*">
                  {{item}}
                </a>
              </li>
            </ul>
          </div>
        </div>
        <!-- end col -->
      </div>
      <!-- end row -->
    </div>
    <!-- end container -->
    <div class="container mt-4 pt-3" data-aos="fade-up" >
      <section class="grid" id="grid" >
        <div  class="item" v-for="(item, index) in items" :key="index" :data-category="item.category.toLowerCase()"
          :data-description="item.description">
          <div class="item-content position-relative">
            <img :src="item.src" alt="img-project">
            <div class="work-detail" @click="showImg(index)">
              <div class="content">
                <h5 class="text-light title mb-0">
                  {{item.title}}
                </h5>
                <p class="text-light">
                  {{item.description}}
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
      <!-- end grid briefcase -->
      <vue-easy-lightbox :visible="visible" :imgs="items" :index="index" @hide="handleHide"></vue-easy-lightbox>
    </div>
    <!-- end container -->
  </section>
  <!-- project End -->

y aca como dije antes en ves de usar el querySelector utilizo los manejo de eventos de vue, es decir, @click para llamar esta funcion. que hara uso del muuri(el cual esta previamente ya inicializado igualmente como dije antes :D) y su metodos de filtrado :)

    filterItems(index){
            this.itemSelected = index
            const category = this.categoriesProject[index].toLowerCase();
            category === 'all' ? this.grid.filter('[data-category]') : this.grid.filter(`[data-category="${category}"]`)
          },

Agradezco a @gbianchi por hacerme ver que no estaba aprovechando correctamente las propiedades que vue ofrece.

4
  • Y en realidad, seguis sin hacerlo... si haces un v-for sobre un array, ya sabes el elemento al cual haces referencia con la key... entonces no es necesario que hagas un e.target porque ya sabes de que elemento hablas... bastaria con que actualizaras el array de donde estas referenciando todo eso... todavia te falta entender un poco como funciona vue.. cuando cambias una variable en tu script, esta cambia sola en el dom virtual y refresca tu vista....
    – gbianchi
    Commented el 4 ago. 2021 a las 2:47
  • @gbianchi ayyy se me escapo esa correcciòn, puedes checar, ya estaria no? Commented el 4 ago. 2021 a las 3:19
  • que lo unico que veo asi que me faltaria seria hacer el div.item ese un componente y listo no? gracias @gbianchi por ayudarme y disculpa si pregunto boludeces Commented el 4 ago. 2021 a las 3:44
  • 1
    Ahora me gusta mucho mas... te das cuenta de todo lo que te ahorra VUE en buscar cosas en el DOM y pensar como tiene que estar todo? solo lo manejas con variables... ;)
    – gbianchi
    Commented el 4 ago. 2021 a las 3:54

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.