Calling a Vue function within a v-for loop to change data

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