我有一个输入(右上角)用户可以搜索的东西,当它的指令长度获得3个字符,它将显示产品列表并突出显示匹配…
看看我的代码:
<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)中,它的工作.
我正在接受给予奖励的答案,因为它是正确的.