Vue.js Use method in v-for

Question

I want to run a method inside a v-for in my Vue component. Example:

<div v-for="(foo,index) in bar">
      <p>{{myMethod(foo,index)}}</p>
</div>

When I do this the p-tag just stays empty. Here is my method(with an axios call):

 myMethod:function(foo,index) {
    axios.get('/myAjaxCall')
    .then((response)=> {
        //works perfectly
        alert(response.data);
        return response.data;

    })
    .catch(function (error) {
        console.error(error);
    });
   },
 }

When I alert( SomethingWithFooAndIndex), the browser is showing exactly what I need. When I remove the axios call the method seems to work

Thanks!

This is just a simplified example, I am using them in the ajax url — Sander Van Keer
– Sander Van Keer, Commented Aug 2, 2017 at 13:08

Xiao Da · Accepted Answer · 2017-08-02 12:58:28Z

2

I dont think you should use myMethod in v-for

axios is asynchronous

Try to do myMethod with bar in another method, get a data newbar, you can render the newbar

<div v-for="(foo, index) in dataBar"> <p>{{otherSimpleMethod(foo, index)}}</p> </div>

add dataBar in data
do myMethod with variable bar in another method newMethod
update dataBar（the axios response） in newMethod
do newMethod in mounted(I guess you want to do this after page loaded)

Or you can try nextTick

BTW, the title Vue.js Use mounted in v-for ??? maybe Vue.js Use method in v-for???

answered Aug 2, 2017 at 12:58

Xiao Da

292 bronze badges

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

Comments

Suresh Velusamy · Accepted Answer · 2017-08-02 12:26:23Z

1

You has issue in your code. You missed a quote <div v-for="(foo,index) in bar"> <p>{{myMethod(foo,index)}}</p> </div>

Please refer the following jsbin http://jsbin.com/wovavut/edit?html,js,output

answered Aug 2, 2017 at 12:26

Suresh Velusamy

2,40820 silver badges24 bronze badges

2 Comments

Suresh Velusamy Over a year ago

You can still refer jsbin

Sander Van Keer Over a year ago

Thanks to you I found out the axios is causing the problem. Chekc my edited question please

tony19 · Accepted Answer · 2022-07-16 05:35:41Z

0

I also don't believe you should use a method in the v-for, but instead use a computed property that applies your method to the unprocessed array of your items that likely sits somewhere in data:

Vue.js 2: Computed

edited Jul 16, 2022 at 5:35

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 2, 2017 at 13:40

Jonathan M. Hethey

7146 silver badges15 bronze badges

2 Comments

Sander Van Keer Over a year ago

But I need the foo from the for loop in my method. And I think you can't add variables to computed functions

Jonathan M. Hethey Over a year ago

@SanderVanKeer: if your data comes from somewhere (either set in created or as props) you can loop/map over that and save it (enriched with maybe data from an api call or user storage) to the computed property. Alternatively you can make the computed function do everything that you need done to the raw data and then iterate over it. Can you provide more context?

Collectives™ on Stack Overflow

Vue.js Use method in v-for

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related