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

Updated fiddle.

<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（所有响应式数据属性必须预先正确声明）。

Vue 过滤器从 vue 1 迁移到 vue 2

Vue filters migration from vue 1 to vue 2

vue.js

vuejs2

vue-filter