Items Out Of Order After Data Updated On Vue3

[dalezak]

I've used Colcade on multiple projects and it's always worked great!

However on a new Ionic app in Vue3, the items are getting prepended at the beginning after loading more data, instead of showing in the correct order. If I remove the Colcade component, the items are rendered in a linear list in their correct order.

The initial render loads the order of items correctly, the problem only occurs after loading more items which should appear at the bottom. Here is my Vue3 component.

<template>
  <div ref="grid" class="grid">
    <div class="grid-col grid-col--1"></div>
    <div class="grid-col grid-col--2"></div>
    <div class="grid-col grid-col--3"></div>
    <div class="grid-col grid-col--4"></div>
    <slot></slot>
  </div>
</template>
<script>
import { defineComponent } from "vue";
import Colcade from "colcade";
export default defineComponent({
  name: "grid-cards",
  data() {
    return {
      cards: null,
    };
  },
  mounted() {
    this.loadCards();
  },
  beforeUpdate() {
    this.removeCards();
  },
  updated() {
    this.loadCards();
  },
  unmounted() {
    this.removeCards();
  },
  methods: {
    loadCards() {
      if (this.$refs.grid) {
        this.cards = new Colcade(this.$refs.grid, {
          columns: ".grid-col",
          items: "ion-card"
        });
      }
    },
    removeCards() {
      if (this.cards) {
        this.cards.destroy();
        this.cards = null;
        delete this.cards;
      }
    }
  }
});
</script>
<style lang="scss">
.grid {
  ion-card {
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 30px;
  }
}
@media (min-width: 720px) {
  .grid {
    &:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    ion-card {
      margin-left: 20px;
      margin-right: 20px;
      margin-bottom: 40px;
    }
  }
}
</style>
<style scoped lang="scss">
.grid-col {
  float: left;
  width: 100%;
  height: auto;
}
.grid-col--2, .grid-col--3, .grid-col--4 {
  display: none
}
@media (min-width: 720px) {
  .grid-col {
    width: 50%;
  }
  .grid-col--2 {
    display: block;
  }
}
@media (min-width: 1140px) {
  .grid-col {
    width: 33.333%;
  }
  .grid-col--3 {
    display: block;
  }
}
@media (min-width: 1400px) {
  .grid-col {
    width: 25%;
  }
  .grid-col--4 {
    display: block;
  }
}
</style>

I use the Colcade grid of cards like this.

<grid-cards>
  <user-card :user="user" :key="user.id" v-for="user of users"></user-card>
</grid-cards>

I've followed similar logic to vue-colcade removing the existing grid and then recreating it after the data is updated. This logic is similar to Quasar app in Vue2 which worked fine, so think the issue is perhaps related to changes in Vue3?

[viking2917]

I don't know anything about Vue, but I had a similar issue with AngularJS: #23 I found a workaround of sorts as noted in the issue, but my workaround has some undesirable artifacts. maybe you can find a way around them with Vue....

[dalezak]

Thanks for sharing this @viking2917, I meant to reply when you posted this but forgot. What's strange is that Colcade always worked fine with Vue 2 but started putting things out of order with Vue 3. I'm looking into this problem again, will let you know if I find a workaround for this.

[viking2917]

@dalezak cool would be interested if you a good approach!