How to create a clickable anchor tag in VueJS with filtered/ transformed data - vue.js

Question

I have a VueJS app that has the following style of (externally provided) data:
data: function() {
return {
posts: ['1:foo bar oof rab', '2:bar oof rab foo', '3:oof rab foo bar']
}
}
I want my template to loop through posts and make everything to the left of the semi-colon a clickable anchor tag:
<li><a id="1" href="#1">1</a>:foo bar oof rab</li>
<li><a id="2" href="#2">2</a>:bar oof rab foo</li>
<li><a id="3" href="#3">3</a>:oof rab foo bar</li>
Using a filter it's easy to split the text from the anchor position:
<template>
<div>
<v-for="post in posts">
<li>{{ post | trimAnchor }}:{{ post | trimPost }}</li>
</v-for>
</div>
</template>
filters: {
trimPost: function(value) {
value = value.toString();
return value.split(':')[1]
},
trimAnchor: function(value) {
value = value.toString();
return value.split(':')[0]
},
hashAnchor: function(value) {
value = value.toString();
return '#'+value.split(':')[0]
}
But filters don't work in v-bind or router-link:
<li>
<div :id="{{ post | hashAnchor }}">
<router-link="{{ post | hashAnchor }}">
{{ post | trimAnchor }}
</router-link>
</div>
:{{ post | trimPost }}
</li>
What is the correct approach to getting the output I'm after? Should I be using computed & if so, how?
Any help appreciated.

Answer 1

In these kind of cases I always recommend using a computed property. It keeps your template clean, and allows much freedom in preparing your data. Due to it being a computed property, it will automatically recalculate if your data were to change.
The first part is to create some object with all the necessary parts you require:
computed: {
anchors () {
if (!this.posts) {
return [];
}
return this.posts.map(
identifier => {
const [anchor, text] = identifier.split(':', 2);
return {
anchor,
text
}
}
)
}
}
Then you destructure it where you need it. I also added a key to your v-for, assuming that the first part is guaranteed to be unique. It would need to be if your anchors are going to work.
<template>
<div>
<v-for="{ anchor, text } in anchors" :key="anchor">
<li><a :href="`#${anchor}`">{{ anchor }}</a>:{{ text }}</li>
</v-for>
</div>
</template>
Of course you can use filters if needed on the link or li body if you need.