A Blog Of Random Coding Techniques & Experiments Robert Askam

Calling a Vue function within a v-for loop to change data Post Calling a Vue function within a v-for loop to change data 1 year ago

While working on this site I came across an issue with a way I saved the tags that are outputted below a post.

They are saved against the post in a comma separated format and to style these individually was not going to work. I found a useful way of calling a function within a v-for loop.

Firstly while iterating through the posts data call a method, on the HTML element add:

v-html="splitTags(post.tags)"

Now in your methods, within your Vue Component create a method called splitTags:
 splitTags: function(tags) {
var tagsArray = tags.split(',');
var finishedTags = '';
var i;
for (i = 0; i < tagsArray.length; i++) {
finishedTags += 'span class="postTag">' + tagsArray[i] + "/span>";
}
return finishedTags;
},


Now every iteration of the v-for will call this function and split the tags and apply a class to it making it possible to style each tag.