Hi there,

I've been getting further along in using vue.isotope. I'm looking into browser compatibility and hit the wall concerning Internet Explorer.
On Win10 and IE11 I get a SCRIPT1003: Expected ':' error. It happens in the vue.isotope 'props,' line:

    var isotopeComponent = {
      name: 'isotope',

      props,

I've been using stuff like babelify (preset-env) but it doesn't really help.
Might I have fallen on a bug? Or am I stupidly missing something?

ps. whenever I have time a will add an example in the closed 'combination filter' issue, because I did found a solution (but did not have time put the essence in js.fiddle).

In the demo given in README.md ( https://jsfiddle.net/dede89/d117mj5u/ ) clicking the layout buttons "masonry" and "masonryHorizontal" and switching back and forth will eventually cause the layout to go completely vertical.

I am in Chrome 52.0.2743.116 (64-bit) on a MacBook Pro Retina 13-inch OS X El Capitan ver. 10.11.6.

Hello, is your package running on a vue cli/webpack installation? I tried your example code, but it didn't work.

  import Vueisotope from 'vueisotope'
  export default {
    components: {
      'isotope': Vueisotope
    },
    data () {
      return {
        layouts: [
          'masonry',
          'fitRows',
          'cellsByRow',
....

This is my error:
Unknown custom element: <isotope> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Do have a solution for my problem?

Hi there! I really appreciate this library. Thanks for your work on it.

I'm afraid I'm missing one piece, though, which is how to call the built-in "layout" method manually. What I want is to manually invoke layout from a separate function call.

I have several functioning Vue.Isotope objects on the page, and am able to interact with them in other ways. I just can't figure out how to use the Methods described in the Readme. If my Vue object is called app, shouldn't app.layout('isotopeID') work? Or is there some way to refer to a specific Vue.Isotope object that I've missed?

I feel like I'm missing something pretty basic, but nothing I've tried has worked. Any help would be greatly appreciated!

I may be dense, but when trying to use your component with vue-router I get TypeError: Cannot read property 'vm' of undefined when trying to use the filter function. Sorting and layout both work before trying to filter, but after they break with the same error.

Here is a live example of the issue. In this case there's a router.js and main.js and the template for the isotope router-view is inline in the router file. Any idea what's going wrong?

Are 'arrangeComplete' and 'layoutComplete' events supported?

Hi, can you add toggle layout

Hi there, first of all thanks for the isotope binding with vue. Saved a lot of headaches already! Great work 👍

In my usecase I have a list of links with newest being at the top left of the grid. If a new link is added, it will be appended to the bottom of the list, whereas it should be on the top according to sort order. Reading the isotope docus, it should be possible using the prepend method instead of insert.
Docs: http://isotope.metafizzy.co/v1/docs/adding-items.html#prepending

I'd like to see support for this as an option? for vue-isotope.

For what critical reason we are packaged with huge lodash dependency?

component is squawking about invalid key sort. Removing the sort variable in option props object seems to remove the warning. please fix. I'm using vue v2.5.11

<isotope :options='{}' :list="galleryImage" id="root_isotopeCaption">
<plantCaption v-for="plantCaption in galleryImage" v-bind:plantCaption="plantCaption" :key="plantCaption.guid">
</plantCaption>
</isotope>

And my template :
<img v-bind:src="plantCaption.imageURL">

And all my images overlapp themselves.

People seems to have the same issues here : https://stackoverflow.com/questions/13959579/isotope-folded-elements-overlap

Could you tell me how to fix it ?

Cheers

Hi, i have an isotope layout on one of my vue-router routes. Whenever i leave this route, the layout visibly breaks during the route transition. The isotope styles are removed, and the elements are just stacked column wise as standard, block layout divs.

This is the route transition css.

.fade-enter-active, .fade-leave-active{
  transition: .5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

.fade-enter-active {
  transition-delay: .5s;
}

The broken layout is visible for half a second, which is more than enough time for the user to go, "huh?".

What can i do to fix this?

Hi David,

when filtering the visible elements sometimes "jump". It's not much but it's very annoying.
In Firefox it's running smoothly. Chrome & Safari makes the items jump.

Any idea?

Ty

I'm trying to pass some additional params to isotope.
$('.grid').isotope({ itemSelector: '.grid-item', // use a separate class for itemSelector, other than .col- **percentPosition: true,** masonry: { **columnWidth: '.grid-sizer'** } });
those params,
how can i do that? i have no clue if it should be included in getOptions Method.
I'm Using Vue.Js 2
This is the metods im using.
getOptions: function () { var _this = this return { getFilterData: { none: function () { return true; }, filterByCategory: function (itemElem) { return itemElem.category.name.toLowerCase() == _this.$refs.cat.$data.filterOption.toLowerCase(); }, } }; }, layout () { this.$refs.iso.layout('masonry'); },

All examples were made with vue 1.0 and simply changing VueJS to version 2.516 return an error.

I have a Rails 4 app and installed vue-isotope using bower and have included it in my Rails asset pipeline. When I attempt to push to heroku I get an error due to:

ExecJS::ProgramError: Unexpected token punc «,», expected punc «:» (line: 68096, col: 11, pos: 3098276)

This only occurs when I include vue-isotope.

hi, my code is:

<isotope
	:options="{}"
	:list="[]"
	class="row"
>
	<some-item
		v-for="item in items"
		:key="item.key"
		class="col"
	/>
</isotope>

const items = [{}, {}, {}, {},];

on some setInterval (1000s) I add one object to items. After that to all append className 'item'.
And in the end it may be happen that

I found that
rawChildren.forEach(elt => addClass(elt, this.itemSelector))

And every time on scroll, the same thing happens. The item class is constantly put down to all elements of the list.

I'm trying to bind to the arrangeComplete event listed here - https://isotope.metafizzy.co/events.html#isotope-events

It looks like this plugin is manually emitting events for things like filter, sort, layout, etc. But there doesn't appear to be a way to bind to the native isotope events.

@David-Desmaisons is that possible?

We're using vue.isotope but are running into a problem, vueisotope uses isotope-layout which doesn't have the packery layout option. Ideally there should be some way to use isotope-packery (v2) instead.

I started a new project with vue-cli and installed isotope by using npm. I modified the webpack references as shown in the readme, then I just tried to mimic the demo:

<template>
      <isotope :list="list" id="root_isotope" class="isoDefault" :options="option">
        <div v-for="element in list" @click="selected = element" :key="element.id">
          {{element.title}}
          <br> {{element.author}}
        </div>
      </isotope>
</template>

<script>
import Vue from 'vue'
import isotope from 'isotope'

Vue.use(isotope)

new Vue({
  ...
})
</script>

But there's no way to make it work, Vue complains about isotope element:

[Vue warn]: Unknown custom element: <isotope> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I also tried different combinations of imports by importing lodash and istope-layout manually but nothing to do. Any idea on what I'm doing wrong?

Just wondering when this will undated to support Vue.js 2.0?

I am currently running into 'Cannot read property 'params' of undefined' on line 45 of 'Vue.Isotope/src/vue_isotope.js'.

This is a great vue component for using isotope!

However, I can't seem to figure out how to use events. Specifically, I'd like to do some additional handling of my VM when arrange and sort events are emitted. An example in the readme would be great.

Thanks.

How do you fire a certain layout if you have multiple grid components? I don't understand how I get the id property. Here is an example:

<component-1
  v-isotope-for="post in posts"
  :options="postGridOpts"
  :data="myData",
  track-by="$index"
><slot></slot></component-1>

<component-2
  v-isotope-for="post in posts"
  :options="postGridOpts"
  :data="myData",
  track-by="$index"
><slot></slot></component-2>

Then in the parent component I have:

ready() {
  Vue.nextTick(() => {
    this.isotopeLayout(); // What ID?
  });
}

[Not that real issue]
I don't know how to get value from items that sorted and I didn't see any methods to do that.

Example. I want to change color of sorted items when clicking sort button. How to get sort values when clicking it?

It seems "this" from the vue instance vm is not made available to the getFilterData functions. No error is thrown because it is just filtering on "undefined". Filtering works when directly inserting text:return el.description.includes('hello').

data: function () {
  return {
    searchStr: null,
    option: {
      getFilterData: {
        "contains": function(el) {
          console.log(this.searchStr) // undefined when called
          return el.description.includes(this.searchStr)
        }
      }
    }
  }
});

I have this current setup where I'd like to set the filter buttons as categories. The buttons are displayed correctly and the key passed on successfully. I would like to filter items according to the selected category. How do I set the option.getFilterData dynamically? (As opposed to statically declaring the filter options)

// buttons
<button 
    v-for="(val, key) in categoriesForFilter" 
    class="button" 
     :class="[key===filterOption? 'is-checked' : '']" 
     @click="filter(val.id)">{{val.name}}
</button>


....

data() {
    return {
        option: {
            itemSelector: ".element-item",
                getFilterData: {
                    "show all": function () {
                         return true;
                    },
                    // get key selected and filter according to the category chosen
               }
         }
   }
},
created() {
    // parse categories
    this.categories = JSON.parse(this.allCategories);
            
    // feed filter options
    this.categoriesForFilter.push({
        id: 'show all',
        name: 'Show All'
     })
     for(var i=0; i<this.categories.length; i++) {
         this.categoriesForFilter.push({
             id: this.categories[i].id,
             name: this.categories[i].name,
        })
     }
}

Hi,

currently i'm running into the problem, when updating my list of elements via AJAX, i cannot re-initialize isotope - it displays only the initial elements.
In the isotope docs (https://isotope.metafizzy.co/methods.html#reloaditems) is a funtion "reloadItems" which might solve my problem but vue-isotope tells me, that this is not a function (called with this.$refs.productGrid.reloadItems())

Is there by any chance a possibility to call all native isotope functions? Or does your plugin provide a function like this? Or any other solution?

Thank you in advance!

This issue may not be directly with Vue.Isotope, but given the popularity of using vue with webpack/vue-loader I thought it was worth trying to resolve. I'm also not ruling out the possibility that I'm doing something really stupid.

I'm trying to use this excellent directive in my webpack app using vue-loader but it seems I can get the Vue instance to see the directive.

I've tried loading it in every place I can think, but I'm clearly missing something, perhaps due to my relative unfamiliarity with webpack.

Calling Vue.use after importing the directive in main.js doesn't seem to register the directive across components- I get the error [Vue warn]: Failed to resolve directive: isotope (found in component: <hello>).

Should I be registering the component in a different location? Any suggestions would be appreciated.

//main.js
import Vue from 'vue';
import App from './App';
import Vueisotope from 'Vueisotope'
Vue.use(Vueisotope)

new Vue({
  el: 'body',
  components: { App }
})

//App.vue
<template>
  <hello></hello>
</template>

<script>
import Hello from './components/Hello'

export default {
  components: {
    Hello
  }
}
</script>

//Hello.vue
<template>
  <div v-isotope="element in list">
    <p>{{element.name}}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list:
      [{'name':'one'}, {'name':'two'},{'name': 'woah'},]
    }
  }
}
</script>

https://isotope.metafizzy.co/filtering.html#combination-filters

Is there support for combination filters?
Thanks.

Hi,

for first: great job, thanks!

But one small problem. I can't get filters to work.

I have filtering method like in demo:
filter: function() { this.$refs.grid.filter('all'); },

Options like:
sortBy: 'by_nick', getSortData: { by_nick: function(user) { return user.nick.toLowerCase(); }, by_age: function(user) { return user.age; } }, getFilterData: { all: function() { return true; } }
And html:
<isotope ref="grid" :list="users" :options='isotopeOptions()'> <div class="user" v-for="user in users"> <user v-on:invite="eventInvite({{ Auth::user()->id }}, user.id)" :user="user" self="{{ Auth::user()->id }}"></user> </div> </isotope>

Sorting is working, but filtering is removing all items, no matter what I will return in filter function.

I think thats why Im getting error:
Uncaught TypeError: Cannot read property 'vm' of undefined

Do you might help, whats going on?

BTW. while npm installation, gulp crushes on trying load node_modules/masonry, coz that lib is called node_modules/masonry-layout originally, i think :)

[Basic](https://jsfiddle.net/dede89/rz7q746y/)<br>
[Complete](https://jsfiddle.net/dede89/rz7q746y/)<br>

Same links

Hey David,
I'm trying to use vue isoptope in chris fitz enterprise boilerplate and I'm not having any luck. Can you take a look and try to help me out?

https://github.com/WorkLabs/friends2

Hi again,
your docs say "Full support of Isotope options via options parameters" but setting a default filter doesn't work.

isotopeOptions: {
  itemSelector: '.oc-product',
  filter: 'filter1', // what must be entered here? css class? or same as in getFilterData?
  getFilterData: {
    "show all": function() {
      return true
    },
    filter1: function(el) {
      return el.type === 'filter1'
    }
  }
}

Is this possible? If so, how?

Thank you!

Hi,

I am getting this odd error when clicking on a filter (the actual filter works though):

app.js:42886 Uncaught TypeError: fns.apply is not a function
    at VueComponent.invoker (app.js:42886)
    at VueComponent.Vue.$emit (app.js:43355)
    at VueComponent.l (app.js:50847)
    at VueComponent.boundFn [as filter] (app.js:41313)
    at VueComponent.filter (app.js:1003)
    at Proxy.boundFn (app.js:41313)
    at click (app.js:41065)
    at HTMLAnchorElement.invoker (app.js:42886)

My filter is pretty straightforward:

<a @click="filter('a')">Test 1</a>
<a @click="filter('b')">Test 2</a>

methods: {
  filter: function (key) {
    this.$refs.cpt.filter(key);
  }
}
...

Latest versions of both libraries:

"vue": "^2.1.10"
"vueisotope": "^3.1.0"

If you have any idea as to why this is happening, I'd love to hear them.

Thanks.

options:{
itemSelector: 'element-item',
percentPosition: true,
masonry: {
// columnWidth: 'grid-sizer',
gutter: 10
}
}

There is an issue in dist/vue_isotope.min.js.
I've found at least one, if you search string this._isotopeOptions in src/vue_isotope.js and dist/vue_isotope.min.js - you'll get different results.
It causes TypeError: Cannot read property 'getFilterData' of undefined when I try to set default filter.

For now I have to use import isotope from "vueisotope/src/vue_isotope" to solve this issue.

Providing the sortAscending option directly ( sortAscending: true) works with no problem, however when passed as a reference to a value on the vue object (so that it can be toggled: sortAscending: this.upDown), it breaks with TypeError: Cannot read property '[object String]' of undefined. Is this not supported or am I doing something wrong? Perhaps I should also ask if this is just a stupid thing to try and do.

Thanks!

data: function () {
    return {
      upDown: true,
      option: {
        sortAscending: this.upDown
      }
    },
    methods: {
      sort: function(key) {
        this.$refs.isotope.sort(key);
      }
  });

Is there an option to change animation styles? Where are they assign? What if I want to change it from scale to something else?

Is it possible to destroy isotope on mobile and re-initialize on tablet/desktop?

Please, add Nuxt.js setup example in the documentation getting started section

Hello,

I'm just taking some first steps using Javascript, Vue and Isotope. I've tried hours to make a copy of the js.fiddle vue-istope-chemistry-example to work offline (main.js + main.html +main.css), but I can't get it work and get the same problem as in the closed issue #28

var Vue = require('vue');
var lodash = require('lodash');
var Isotope = require('vueisotope');

var count = 0;

var vm = new Vue({  el: "#main",
  data: {
    layouts: [
...

I use npm and browserify to build a bundle.js which I load in the main.html file. When I load the website, the web console tells me the same warning as in the closed issue #28 . Some of the things are there but it doesn't work and has no layout.
I read the readme file and checked on the isotope website and tried to fulfil the recommendations as requested but clearly I don't quite understand. I also tried installing and requiring jQuery and jQueryBridget but nothing works...

Please, let me know if you need any other information from me to help. I understand that I'm asking a bit of hazy question...

Trying to use this component with Vue 2.5.8 and webpack 3.8.1 I get a Uncaught ReferenceError: require is not defined where vueisotope is requireing lodash.

In the isotope remove example seen here the removed element shrinks and fades and the layout is then rearranged. In this test example clicking a word adds it to a different isotope instance and removes it from the current one. Adding the elements seems to work just fine, however, the removal is not smooth.

Any thoughts on what could be causing this?

Hi,
is there a way to use your own computed filters on the :list object?

<div v-isotope-for="element in filteredList" :options='option' @click="selected=element">

computed: {
    filteredList: function(){
     //my custom complex filters
     return .......
  }
},

Thanks!

Hi,

Firstly, thank you for making this :)

I was trying to figure out how to add ImagesLoaded JS (by the same people who made Isotope) to Vue.Isotope. That will help solve my layout issues upon loading.

Cheers.

I noticed that layout recalculates on window resize. How we can trigger this?

Hello !

My application allows the user to "push" the list the isotope layout uses either to the right or the left, wrapping the last or first element back to being the first or last respectively.

Here is what it looks like :

Unfortunately, if the user "pushes" the array too fast, the layout breaks and the visible array of elements are duplicated, even though the list managed by Vue.Isotope itself is still 20 items :

For now, the application works around this by debouncing the action of the user. It seems changing the possible timing of the changes done to the list allows the problem to be minified.

Still, when clicking to a certain rhythm, the same issue still occurs. I could nullify it entirely by setting an higher debounce limit, but this would hinder the user experience.

For reference, here's the push code :
The vue :

    pushBack: function() {
      if(this.setupInit) {
        let newArray = utils.pushBack(this.tab);
        this.arrangeArray(newArray);
      }
    },
    arrangeArray: function(newArray) {
      // It seems I must do that to trigger a change.
      // Else it will apply the new array without doing anything visually
      this.tab.splice(0, 20);
      setTimeout(() => {
        this.tab = newArray;
        // [...]
      }, 0);
    }

The utils :

  pushBack: function (array) {
    let newArray = [];
    for (let index = 0; index < array.length; index++) {
      if (index === array.length - 1) {
        newArray[0] = array[index];
      }
      else {
        newArray[index + 1] = array[index];
      }
    }

    return newArray;
  }

Any help would be appreciated !

I got this error when using isotope component

./~/isotope-layout/js/layout-modes/masonry.js
Module not found: Error: Can't resolve 'masonry/masonry' in 'node_modules\isotope-layout\js\layout-modes'

installation went fine with no errors.