"this" not set as underlying vm for getFilterData functions about vue.isotope HOT 6 CLOSED

Thank you David! I realized it was the same issue shortly after posting but wouldn't have thought to use a method on my own. And again, thanks for producing this component- it's very handy.

from vue.isotope.

Here you, here is the corrected fiddle:

https://jsfiddle.net/dede89/w1tbv83L/7/

Tweaks:

1. getFilterData and getSortData were not defined in data , so I added filterData and sortData
2. v-for="(val, key) key and val were inverted
3. To have the correct context in the getFilterData contains function, I used ES6 arrow function to capture viewModel context (you can do it by hand if you use ES5 using var ctx=this...):

getFilterData: {
    "show all": function() {
         return true;
   },
    "contains": (el) => {
         return el.description.includes(this.searchStr)
   }
 },

And it worked like a charm....

from vue.isotope.

@bornytm , If you want to access to the vm for option as this, you cant you a method:

<isotope :options="getOptions">

methods:{
 getOptions: {
      return {
        getFilterData: {
            "contains": function(el) {
             console.log(this.searchStr) // undefined when called
            return el.description.includes(this.searchStr)
          }
        }
     }
  }
}

from vue.isotope.

Still stuck unfortunately...

Using <isotope :options="getOptions()"> and

 methods:{
 getOptions: function() {
      return {
        getFilterData: {
            "contains": function(el) {
             console.log(this.searchStr) // undefined when called
            return el.description.includes(this.searchStr)
          }
        },
        sortAscending: this.upDown,
        itemSelector: ".element-item",
        getSortData: {
                    rating: "rating",
                    viewcount: "viewcount",
                   ...
                },
     }
  }
}

doesn't seem to make the function available on the vue data object. I'm getting the error vue.js:525 [Vue warn]: Property or method "getFilterData" is not defined on the instance but referenced during render. I get the same error for sortAscending and getSortData

Right now I'm suing <button v-for="(val, key) in getFilterData".... and <button v-for="(val, key) in getSortData" like in your example.

from vue.isotope.

Could you create a jsfiddle please?

from vue.isotope.

Sure thing- here you go.

from vue.isotope.