Vuejs use function in v-for

Question

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 }
},
computed: {
    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 !

Answer 1

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

However, if you're calling the server as you indicate in your comment, 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 computed 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 component, you may want to also add a watcher, to call fetchData again with the new values.

Answer 2

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

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

[...]

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

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

I hope this will help you.