Menu
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 !
609
Note that, The v-for directive requires a special syntax in the form of item in items, where items is the source data array and item is an alias for the array element being iterated on. And you can use use for loop or v-for loop in vue js for: Rendering arrays or lists Iterating through the properties of an object
Vue.js supports rendering lists of items onto the browser using the built-in v-for< core directive. In this post, we will explore how v-for can be used in Vue applications.
Out of the box, v-for supports array mutation methods. These are push, pop, shift, unshift, splice, sort and reverse. If any of these operations are performed on an array, the v-for directive updates the view with the new data. Also, when we replace an array with a new array, Vue finds the most optimized way to update the items.
Most importantly its easy to maintain and keeps logic out of your HTML and in the Vue object (where it belongs).
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.
198
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.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
