Vue는 vue 1에서 vue 2로의 이행을 필터링합니다.

Vue는 vue 1에서 vue 2로의 이행을 필터링합니다.

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 리소스

답변해주시면 감사하겠습니다.

바이올린 업데이트

<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.keyVue 2에서는 동작하지 않습니다(모든 무효 데이터 속성은 사전에 올바르게 선언해야 합니다).

언급URL : https://stackoverflow.com/questions/45165086/vue-filters-migration-from-vue-1-to-vue-2