Calling a Vue function within a v-for loop to change data
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.
Categories: Posts