David-Desmaisons / Vue.Isotope

:iphone: Vue component for isotope filter & sort magical layouts
MIT License
345 stars 48 forks source link

Made it possible to add non-grid items under the isotope element. #40

Open zArubaru opened 6 years ago

zArubaru commented 6 years ago

Added a change in src/vue_isotope.js that makes it possible to add non-grid items under the isotope element. For example:

<isotope :item-selector="'RL-IsoGallery__tile'"
         :options="isotopeOptions"
         :list="tiles">
  <div v-for="tile in tiles"
       :key="tile.id">
    <img :src="tile.src" :alt="tile.alt">
  </div>
  <div :key="'$ignore'" class="RL-IsoGallery__gutter"></div>
</isotope>

<script>
isotopeOptions: {
  itemSelector: '.RL-IsoGallery__tile',
  percentPosition: true,
  masonry: {
    gutter: '.RL-IsoGallery__gutter',
  },
},
</script>

Now isotope doesn't forcibly add the item-selector class to the gutter-sizer div, if the :key="'$ignore'".

Before this change, I would either have to add a :key to the gutter-sizer div, which would force the item-selector class, or leave it without a :key, which would lead to the error: Warning template error: isotope children must be keyed. Please rebuild dist/*as you see fit.

I was also working on a more complex fix for this, but this took only into account masonry's gutter and columnWidth, but it might be useful for you later on so check it out: https://github.com/zArubaru/Vue.Isotope/commit/5fcbbcaf043d28c2d706f4ffb9b6b0c308caf729#diff-c0f7674dbe53fdbdfb7d9ff2640ec489

... which made the syntax like this:

<div :gutter="'RL-IsoGallery__gutter'"></div>
<div :column-width="'RL-IsoGallery__column-width'"></div>