У меня есть вход (вверху справа), где пользователи могут искать вещи, когда длина директивы составляет 3 символа, он отобразит список продуктов и выделит совпадения...
Посмотрите на мой код:
HTML
<div id="app">
<div id="header">
<div class="right"><input type="text" v-model="message" v-on:keyup="searchStart()" v-on:blur="searchLeave()"/>
<ul v-if="this.searchInput" class="product-list">
<li v-for="product in products">
{{ product.id }} - {{ product.name | highlight }} - {{ product.qtd }}</li></ul>
</div>
</div>
<div id="main">
<div id="menu">fdfds</div>
<div id="container">{{ message }}</div>
</div>
</div>
JS
var search = new Vue({
el: "#app",
data: {
message: "",
searchInput: false,
products: [
{
id: 1,
name: "produto 01",
qtd: 20
},
{
id: 2,
name: "produto 02",
qtd: 40
},
{
id: 3,
name: "produto 03",
qtd: 30
},
]
},
methods: {
searchStart: function(){
if(this.message.length >= 3)
this.searchInput = true;
console.log(this.searchInput);
},
searchLeave: function(){
this.searchInput = false;
this.message = "";
console.log(this.searchInput);
}
},
filters: {
highlight: function(value){
return value.replace(search.message, '<span class=\'highlight\'>' + search.message + '</span>');
}
}
});
Здесь вы можете увидеть живое перо: http://codepen.io/caiokawasaki/pen/dXaPyj
попробуйте ввести prod
внутри пера...
Правильно ли мой фильтр? Правильно ли я создал фильтр?
Главный вопрос: как вывести HTML из моего фильтра?
Редактировать/Решение
Проблема в этом случае была codepen
, есть какой-то конфликт с vue
, поэтому я не смог избежать html с помощью {{{}}}
, поместить код в другой редактор (jsfidle), и он работал.
Я принимаю ответ на награду, потому что это правильно.