Vue 过滤了从 vue 1 到 vue 2 的迁移

Question

我在将过滤器从 vue 1 迁移到 vue 2 时遇到问题，我在这里创建了我需要的(突出显示与输入文本匹配的文本(：

Vue.component('demo-grid', {
template: '#grid-template',
props: {
filterKey: String
},
data: function () {
return {
searchParams: [
{ key: '' }
],
suggestions: [
{ message: 'Foo' },
{ message: 'Bar' },
{ message: 'Foobar' },
{ message: 'pikachu' },
{ message: 'raichu' }
]
}
},
filters: {
highlight: function(words, query){
var iQuery = new RegExp(query, "ig");
return words.replace(iQuery, function(matchedTxt,a,b){
return ('<span class='highlight'>' + matchedTxt + '</span>');
});
}
}
})

// bootstrap the demo
var demo = new Vue({
el: '#demo'
})

https://jsfiddle.net/t5ac1quc/23/VUE-1 资源
https://jsfiddle.net/t5ac1quc/25/VUE-2 资源

我将非常感激，对于所有的答案

Answer 1

更新了小提琴。

<template id="grid-template">
<ul>
<li v-for="suggest in suggestions" v-html="highlight(suggest.message, filterKey)"></li>
</ul>
</template>
<div id="demo">
<form>
Search <input v-model="searchParams.key">
</form>
<demo-grid :filter-key="searchParams.key"></demo-grid>
</div>

Vue.component('demo-grid', {
template: '#grid-template',
props: {
filterKey: String
},
data: function () {
return {
suggestions: [
{ message: 'Foo' },
{ message: 'Bar' },
{ message: 'Foobar' },
{ message: 'pikachu' },
{ message: 'raichu' }
]
}
},
methods: {
highlight: function(words, query) {
var iQuery = new RegExp(query, "ig");
return words.replace(iQuery, function(matchedTxt,a,b){
return ('<span class='highlight'>' + matchedTxt + '</span>');
});
}
}
})
new Vue({
el: '#demo',
data: {
searchParams: {
key: '',
},
},
});

总结：

• 使用<script>标记存储模板时，请设置type="template"(或类似(以防止浏览器将模板作为 JavaScript 执行。或者最好改用<template>。
• 不再支持{{{ html }}}语法。在 Vue 2 中，你必须改用v-html指令。
• 由于v-html是一个指令(并且不使用{{ }}插值(，因此它不使用筛选器语法。请改用方法。
• 您在数据范围方面遇到了一些问题。根组件需要为其模板中使用的searchParams定义数据。此外，searchParams是一个数组，但您没有将其用作数组(searchParams.key(;这不适用于 Vue 2(所有反应式数据属性都必须预先正确声明(。