Does anyone know if it's possible to use a function in a v-for loop? I would like to do something like:

<div v-for="(stbc, index) in data">
    <select>
        <option v-for="foo in bar(stbc.arg1, stbc.arg2)" :value="foo">
            {{ foo }}
        </option>
    </select>
</div>

[...]
props: {
    Configuration: { required: true }
},
puted: {
    data(){
      return this.Configuration.something
             .filter(stbc => {
               return stbc.val !== "no"
             });
    }
},
methods: {
    bar(arg1, arg2){
        this.$http.get(`server_url/baz?arg1=${arg1}&arg2=${arg2}`)
                  .then(res => { return res.split('\n') });
    }
}

I tried but without success :(

Thank you !

Does anyone know if it's possible to use a function in a v-for loop? I would like to do something like:

<div v-for="(stbc, index) in data">
    <select>
        <option v-for="foo in bar(stbc.arg1, stbc.arg2)" :value="foo">
            {{ foo }}
        </option>
    </select>
</div>

[...]
props: {
    Configuration: { required: true }
},
puted: {
    data(){
      return this.Configuration.something
             .filter(stbc => {
               return stbc.val !== "no"
             });
    }
},
methods: {
    bar(arg1, arg2){
        this.$http.get(`server_url/baz?arg1=${arg1}&arg2=${arg2}`)
                  .then(res => { return res.split('\n') });
    }
}

I tried but without success :(

Thank you !

• javascript
• vue.js

• it works.codepen.io/jacobgoh101/pen/bvqJRB – Jacob Goh Commented Mar 21, 2018 at 13:12
• i would suggest using filters vuejs/v2/guide/filters.html its probably what you would like to acplish. but having a call to the server in a loop would slow your page down big time think of a different way to approach – Sari Yono Commented Mar 21, 2018 at 13:12
• Use a puted property – Luis felipe De jesus Munoz Commented Mar 21, 2018 at 13:12
• I guess it doesn't work because you are returning a promise from an AJAX call. – Tom Fenech Commented Mar 21, 2018 at 13:13

2 Answers 2

v-for can iterate over a the result of any valid expression (though personally I would consider adding a puted property instead).

However, if you're calling the server as you indicate in your ment, you are introducing asynchronous code, and bar(arg1, arg2) is probably returning a promise, rather than an array of strings.

I guess what you want to do is:

props: {
  Configuration: { required: true }
},
data() {
  return {
    serverData: []
  };
},
mounted() {
  this.fetchData();
},
methods: {
  fetchData() {
    // obtain `arg1` and `arg2` from `this.Configuration`
    // (or use a puted property if you prefer)

    if (arg1 && arg2) {
      this.$http.get(`server_url/baz?arg1=${arg1}&arg2=${arg2}`)
                .then(res => { this.serverData = res.split('\n') });
    }
  }
}

Then just refer to serverData in your template. The array will be empty until the promise returned by the AJAX call resolves.

If the Configuration prop changes during the lifetime of the ponent, you may want to also add a watcher, to call fetchData again with the new values.

yes, you could use the puted to achieve that instead of methods, see bellow

<select>
    <option v-for="foo in bar(arg1, arg2)" :value="foo">
        {{ foo }}
    </option>
</select>

[...]

puted: {
    bar(arg1, arg2){
        //get data from server
        return serverData; //this is a string array
    }
}

See this fiddle: https://jsfiddle/49gptnad/2449/

I hope this will help you.