Как вызвать функцию в шаблоне в шаблоне в Vue?

Question

[Игорь Безлепкин]

Привет! Делаю autocomplete. Хочу в списке результатов находить вхождения и выделять их.

<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>'
}

Но отображается вместе с тегами. Типа как кодирует теги в строку.

Answer 1

[Evgeny Kulakov]

Просто вставьте тег strong непосредственно в шаблон.

Comments

[Игорь Безлепкин]

Мне нужно выделять совпадения: Санкт-Петербург

[Evgeny Kulakov]

Тогда можно попробовать сделать через v-html:

<div class="typeahead_body" v-html="replace(item.city)"></div>

[Игорь Безлепкин]

Evgeny Kulakov, https://jsfiddle.net/m7gek23n/1/ работает! Спасибо всем!

Answer 2

[Konstantin Malyarov]

*.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>

*.js

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

Comments

[Игорь Безлепкин]

А в компоненте куда фильтр вставлять?

[Игорь Безлепкин]

https://jsfiddle.net/eywraw8t/64534/

[Konstantin Malyarov]

Если фильтр глобальный:

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

new Vue({
  el: '#app1',
  // Это ваш основной Veu

})

new Vue({
  el: '#app2',
  // Это ваш основной Veu

})

Если чисто для одного компонента:

new Vue({
  el: '#app',
  // Это ваш основной Veu
  methods: {
    // тут ваши методы
  },
  filters: {
  replace: function (value) {
    return '<strong>' + value + '</strong>'
  }
}
})

[Konstantin Malyarov]

Игорь Безлепкин, именно так. Я бы только посоветовал replace поменять на что то другое (filterStrong например), а то через месяц будете смотреть и не понимать что это, переопределение метода или новая функция.

[Evgeny Kulakov]

Konstantin Malyarov, Не будет так работать, на выходе фильтра будет строка и она не будет никак интерпретироваться в dom.

[Konstantin Malyarov]

Evgeny Kulakov, (тут я уверен):

<div class="typeahead_body" v-html="replace(item.city)"></div>

new Vue({
  el: '#app',
  // Это ваш основной Veu
  methods: { 
    replace: function (value) {
      return '<strong>' + value + '</strong>'
    }
  },
})

[Evgeny Kulakov]

Konstantin Malyarov, ? у вас на выходе после фильтра будет строка вида:<strong>value</strong> и она не станет dom объектом.

[Konstantin Malyarov]

Evgeny Kulakov, смотрите предпоследний комментарий.

[Evgeny Kulakov]

Konstantin Malyarov, это другое решение, мой комментарий касался вашего ответа. Именно в таком вариенте оно работать не будет.

[Konstantin Malyarov]

Evgeny Kulakov, вариант с двумя скобками возвращает что есть - чистую строку, вариант с тремя скобками по моему работает в 1 версии vuejs. А работа с html во vuejs 2 только через v-html.

https://ru.vuejs.org/v2/guide/syntax.html