How to call a function in a template in a template in Vue?

Question

Vue.js

Hey! I do autocomplete. I want to find occurrences in the list of results and select them.

<li v-for="(item, key) in typeahead.items" :class="'typeahead-list__item ' + activeClass(key)" @mousemove="setActive(key)" @mousedown="hit" v-bind:key="key" v-bind:data-val="item.id">
  <div class="typeahead_body">{{ replace(item.city) }}</div>
</li>

replace: function (str) {
  return '<strong>Строка</strong>'
}

But it is displayed along with tags. Type as encodes tags in a line.

Answer 1

Just insert the strong tag directly into the template.

Answer 2

*.html

<li v-for="(item, key) in typeahead.items" :class="'typeahead-list__item ' + activeClass(key)" @mousemove="setActive(key)" @mousedown="hit" v-bind:key="key" v-bind:data-val="item.id">
  <div class="typeahead_body">{{ item.city | replace }}</div>
</li>

Vue.filter('replace', function (value) {
  // value - это item.city
  return '<strong>' + value + '</strong>'
})