Run a function inside two v-for loop in vue js

Question

I have two v-for loops like so:

<div v-for="id in ids">
        <div v-for="data in getData(id)">
              <p>{{data.name}}</p>
        </div>
</div>

The first v-for iterates through an array of ids stored inside data(). On the second v-for it iterates through the result returned by the function getData().

The axios call does return an array of result including the name per ids, however the <p> tag doesnt display the names.

<script>
    data(){
       id: ['1', '2', '3']
    },
    methods:{
       getData(id){
          //axios call
          return response.data;
       }
    }
</script>

do you have a different approach that will give the desired result? pls do suggest — sabu monkey
– sabu monkey, Commented Nov 25, 2020 at 7:10
May we see the response.data object. I would also like to suggest that this is a fairly inefficient way of conducting what I believe is an operation to get information of multiple models. You're better off creating an endpoint that gets the info of multiple models at once. — Ayudh
– Ayudh, Commented Nov 25, 2020 at 7:20
Took your advice that it is a bad way of implementing this approach, I then was able to make a working method that ran after the axios call. The method stored all the data I needed. Thank you. — sabu monkey
– sabu monkey, Commented Nov 25, 2020 at 7:47

hamid niakan · Accepted Answer · 2020-11-25 07:46:48Z

2

I think this is the problem:

when v-for calls your method it doesn't wait for axios call to resolve and since there is no array immediately available for it to iterate on, it can't show anything (there isn't anything to show), on the other hand when axios call does resolve there is no way for v-for to get notified and therefore update the template. so situation is something like this:

v-for runs your method
method doesn't return an array immediately and v-for can't wait
there is nothing to show here and it moves on

so here is what you can do:

bind the v-for to an array in data object
use axios result to update the said array

and it should work fine, your code might be like this for example:

// template
<div v-for="data in axiosResult">
   <p>{{data.name}}</p>
</div>

//script
<script>
data(){
   id: ['1', '2', '3'],
   axiosResult: [],
},
methods:{
   getData(){
      //axios call
      this.id.forEach((id) => {
         //axios function for each id
         axiosCall(id).then((result) => {
          this.axiosResult.push(result);
         });
      });
   }
}
</script>

answered Nov 25, 2020 at 7:46

hamid niakan

2,8891 gold badge15 silver badges26 bronze badges

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

1 Comment

sabu monkey Over a year ago

I decided to create another method, which exactly does the same thing. I will still mark this as the correct answer, for others to reference from and for your effort. Thank you.

Collectives™ on Stack Overflow

Run a function inside two v-for loop in vue js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related