Adding methods to the elements created by v-for in Vuejs

Question

I am creating several links, that when clicking on them the web should show some images or others, for that, I have some functions within the object methods of vue, each of these functions is responsible for filtering on an array of images and display those that touch. Up to here, everything is correct, the problem is when I have to refer to these functions since the elements that call these functions are created with a v-for in the following way:

<li v-for="categorie in categories">
<a @click="categorie">{{categorie}}</a>
</li>

my reactive variable categories is an array of 5 strings which simply contain names, well, when I click on any of the links I created, I get the following error in the browser console:

vue.js:2006 Uncaught TypeError: fns.apply is not a function
at invoker (vue.js:2006)
at HTMLAnchorElement.fn._withTask.fn._withTask (vue.js:1804)

Of course I have put the same name to the functions that are inside the methods object, in fact if for example I put the following line:

<li v-for="categorie in categories">
<a @click="test">{{categorie}}</a>
</li>

Yes, that works (notice that I have changed the name of the function), but I need to have different function names for each of the elements, to be able to call different functions according to the filter that I want to apply. Could someone help me with this ??? Thank you!!

Dario Cavanillas · Accepted Answer · 2019-03-02 08:02:56Z

1

Have you considered having them all use the same method? And that method then deciding which method to use?

<li v-for="category in categories">
    <a @click="filter(category)">{{ category }}</a>
</li>

and later in methods:

filter(category) {
    // this could be a switch case too
    if(category === 'a') {
        a();
    } else if (category === 'b') {
        b();
    }
}

That said, I'm not sure how the rest of the code looks, but usually I use computed properties to filter on items. so then the computed would look something like this:

filteredItems() {
    this.items.filter((item) item.type = this.currentFilter)
}

and the filter method would be

filter(category) {
    this.currentFilter = category;
}

answered Mar 2, 2019 at 8:02

Dario Cavanillas

963 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Adding methods to the elements created by v-for in Vuejs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related