Vue.js Use method in v-for

vue use method in v-for
for loop in vue methods
v-for vue
computed vs methods vue
vue computed
vue use function in v for
v-for range
v-for v-bind

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!

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>

  1. add dataBar in data
  2. do myMethod with variable bar in another method newMethod
  3. update dataBar(the axios response) in newMethod
  4. 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???

Call method inside a v-for loop - Get Help, Then, I need to normalize it using a method like that: nomalizer(element) { let data = {}; data.id = element.id ? element.id : 0; data.name� In Vue.js you can use a v-for directive to loop through an array of items, using the following syntax item in items. <ul> <li v-for="todo in todos"> { { todo.title }} </li> </ul> In the example above todos is an array (or a source of data) and todo is a name of the array element being iterated on (you can rename it as you like).

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

List Rendering — Vue.js, Simple example is if I want to loop though my list and do a sum. Method 1a: Using computed function computed: { total() { return this.cart.reduce(function ( sum, item)� Vue.js Use method in v-for. Ask Question Asked 2 years, 10 months ago. Active 5 months ago. Viewed 13k times 4. 1. I want to run a method inside a v-for in my Vue

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

Calling a method from v-for loop : vuejs, The itemLessThanTen function simply uses the JS filter function to return any item who's price is less than 10. Using a method to filter items. In this� Mutation Methods. Vue.js wraps an observed Array’s mutation methods so they will also trigger View updates. The wrapped methods are: push() pop() shift() unshift() splice() sort() reverse() You can open the console and play with the previous examples’ items array by calling its mutation methods. For example: example1.items.push({ message: 'Baz' }).

Iterating Over Items in Vue.js With V-for, In VueJS, v-for loops are something that every project will use at some point or another. They allow you to write for loops in your template code. Vue.js also allows adding key modifiers for v-on when listening for key events: <!-- only call vm.submit() when the keyCode is 13 --> < input v-on:keyup.13 = "submit" >

6 Techniques to Write Better VueJS v-for Loops, Now let's create a filter for those names. We'll start by creating an input with v- model that will originally be an empty string, but we'll eventually use� Methods can be used for various things as you will see in the upcoming videos, but for now I want the method to return a string value that can be output through string interpolation. So how can we access the data properties within this method? Vue.js proxies our data and methods to be available in the this context.

Methods, Computed, and Watchers in Vue.js, Even v-model uses v-on under the hood. In Vue methods and expressions, you have access to a $emit() function that lets you emit an event up� When Vue is updating a list of elements rendered with v-for, by default it uses an “in-place patch” strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will patch each element in-place and make sure it reflects what should be rendered at that particular index.

Comments
  • you're missing a closing quote on the attribute btw
  • This is just a simplified example, I am using them in the ajax url
  • You can still refer jsbin
  • Thanks to you I found out the axios is causing the problem. Chekc my edited question please
  • But I need the foo from the for loop in my method. And I think you can't add variables to computed functions
  • @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?