Почему не работает фильтр Vue.js?

Question

[JohnDaniels]

Мне понадобился фильтр, который выделял бы некоторые слова в тексте.
Я сделал так:

Vue.filter('highlight', function(value, data){
    data.forEach(function(el, i, ar){
        value.replace(el, '<b>' + el + '</b>')
    })
    return value
});

В компоненте вызываю

<p>{{ text | highlight(arData)  }}  </p>

//
<script>
 export default{
        data(){
            return{
                text: 'тут некоторый текст',
                arData: ['тут', 'текст']
            }
        }
}
</script>

Получаю ошибку
TypeError: value is undefined
то есть в калбэк фильтра не передается первый аргумент. Что я делаю не так? Разве он не должен подставляться туда автоматически?

Answer 1

[Ivan Bogachev]

в калбэк фильтра не передается первый аргумент. Что я делаю не так? Разве он не должен подставляться туда автоматически?

Должен. Сделал демку на codepen, там все работает (тут есть логическая ошибка - value.replace не меняет значение value).

Насколько я понял, вы хотите сделать жирный текст на странице. Но для того, чтобы полученная строка интерпретировалась как html, нужно использовать v-html, а внутри него фильтры не работают (они работают только в {{ ... }} и v-bind). Так что стоит склониться к использованию computed-свойства вместо фильтра.