CODEWITHSUNDEEP
jqueryintegrationjquery-isotopevue.js
bornytm
bornytm

Reputation: 813

Integrating Isotope and Vue

I just started using vue about a month ago and love it so far. Currently I'm running into some issues using it along side isotope.js, a slick filtering/sorting/layout library.

The problem is isotope wants to control adding and removing elements in the layout (currently done with jquery). If I add an item with jquery, vue isn't aware of any functionality on the item (looking for events and the like) and if I add with view, isotope doesn't know to arrange the element.

I've illustrated the issue in this fiddle. Note that clicking removes an element from the container and clicking to remove from isotope also removes the element from the vue container, but not the other other way around. Clicking also tries logging to the console, which of course only works on the elements put into the DOM with v-for.

I've found a temporary work around that manually keeping the two in sync, but it is far from ideal.

What is the idiomatic way to solve for this? Obviously I'd love to be able to use v-for to append and remove items. Is it time for a custom directive? Where do I get started?

Adding elements this way is an anti-pattern, but I don't know how else to make isotope aware of them.

add: function(thing) {

  // add to isotope - vue is unaware of the test() fn when it enters the DOM
  this.iso.isotope('insert', $('<span @click="test()" class="thing">' + thing.name + '</span>'))

  // add to vue
  this.things.push({
    name: thing.name
  })
  this.itemName = ""

},

Thanks!

Upvotes: 2

Views: 3453

Answers (1)

David Desmaisons
David Desmaisons

Reputation: 1006

I created a directive to use isotope with vue.js. It expose all the option available in isotope and make filtering and sorting reactive to property changes. It is used in a similar way as a v-for directive:

<div v-isotope="element in list1">
    <p>{{element.name}}</p>
</div>

Example:

Example on fidlle: fiddle 1, fiddle 2, fiddle 3

Available on github: Vue.Isotope

Upvotes: 6

Related Questions