Поиск Lunr.js не работает в VueJS, несмотря на отсутствие ошибок в консоли - PullRequest
Новая
       27

Поиск Lunr.js не работает в VueJS, несмотря на отсутствие ошибок в консоли

0 голосов
/ 24 октября 2019

Я пытаюсь реализовать поиск, используя http://lunrjs.com/ в VueJS.

Я передаю данные, полученные через JSON, в функцию LunrJS, а также отправляю поля и ожидаю результаты поиска, но после поиска, Я ничего не получаю взамен.

Нет ошибок в консоли Chrome.

Пожалуйста, помогите.

Вот мой файл просмотра js 

     <template>
     <div id="show-original">

       <input type="text" placeholder="type to search"
       v-model="search"
       @input="$emit('update:search', $event.target.value)" />
        <p>Number of results: {{list.length}}</p>

     <ul>
     <li v-for="item in list" :key="item.id">
          {{item.title}}
          <br>
         Speed: {{ item.speed }}
         <br>
         Glide: {{ item.glide }}
         <br>
     </li>    
     </ul>
     </div>
 </template>

<script>
export default {
    data(){
    return{
       original:[],
       list:[],
       search:'',
       resuls:[],
       searchIndex:null
    }
  },
  mounted(){
    this.$axios('https://api.myjson.com/bins/te9h0')
       .then(data => {
          this.original = data.data
          this.list = this.original
          this.buildIndex()
      })

    this.$watch('search', () => {
      this.resuls = this.searchIndex.search(this.search)

      this.list = []
      this.resuls.forEach(d => {
        this.original.forEach(p => {
          if(d.ref == p.id) this.list.push(p)
        })

      })
    })
  },
  methods:{
    buildIndex(){
      var documents = this.original
      this.searchIndex = this.$lunr(function () {
        this.ref('id')
        this.field('title')
        this.field('speed')
        this.field('glide')

        documents.forEach(doc => {
          this.add(doc)
        })
      })
    }
  }
}
</script>

Я следовал этому уроку https://fabiofranchino.com/blog/how-to-make-a-client-side-search-engine-with-vue-and-lunr/ и использовал код из https://codepen.io/abusedmedia/pen/GzjJEP Он работает здесь на CodePen, но не для меня.

...