0

我试图集成fuse.js到我的Nuxt.js应用程序中,但无法运行。搜索引擎基本上正在使用当前设置,但在加载页面时出现初始错误:

Cannot read property 'title' of undefined

每个keyUp.

数组一开始也是results空的,但我想从一开始就显示所有可能的条目。你知道如何解决这个问题吗?

<template>
  <div :class="'panel'" ref="panel">
    <input
      class="search"
      type="text"
      v-model="searchTerm"
      @keyup="filterResults()"
    />
    <ul v-if="results" class="section">
      <li v-for="result in results">
        {{ result.item.title }}
      </li>
    </ul>
  </div>
</template>

<script>
import Fuse from "fuse.js";

export default {
  mounted() {
    this.fuse = new Fuse(this.list, this.options);
    this.results = this.list;
  },

  methods: {
    filterResults() {
      if (this.searchTerm.trim() === "") this.results = this.list;
      else this.results = this.fuse.search(this.searchTerm.trim());
    },
  },

  data() {
    return {
      fuse: null,
      searchTerm: "",
      results: [],
      options: {
        shouldSort: true,
        maxPatternLength: 32,
        keys: ["title", "author.firstName"],
      },
      list: [
        {
          title: "Old Man's War",
          author: {
            firstName: "John",
            lastName: "Scalzi",
          },
        },
        {
          title: "The Lock Artist",
          author: {
            firstName: "Steve",
            lastName: "Hamilton",
          },
        },
        {
          title: "HTML5",
          author: {
            firstName: "Remy",
            lastName: "Sharp",
          },
        },
      ],
    };
  },
};
</script>
4

0 回答 0