Vue.js - adding html tags inside of string in array

Question

I have an array of strings in following form:

arr: [
"feature1 str1",
"feature2 str2",
"feature3 str3"
]

My goal is to highlight part of those strings with <b> tag (for example - "feature1 "). ”）。 Further, strings must be rendered inside of vue template, for example:

<ul v-for="(feature, index) in arr" v-bind:key="index">
        <li>{{feature}}</li>
    </ul>

I'm not getting the result I want, so - the 'bold text' is not rendered.

If there's any solution or advice for fixing this problem - thanks in advance.

Answer 1

How about this?

<ul v-for="(feature, index) in arr" v-bind:key="index">
  <li>{{feature.split(" ")[0]}} <b>{{feature.split(" ")[1]}}</b></li>
</ul>

this will only works if tthe arr value is always 2 word separateed by space and you want to highlight the 2nd word.