Vueで検索機能を実装する方法

フロントエンド機能の実装プロセスでは、検索機能が一般的な要件となります。人気のあるフロントエンド フレームワークとして、Vue は検索機能の実装も適切にサポートできます。この記事では、Vue で検索機能を実装する方法と具体的なコード例を紹介します。

1. 準備

検索機能を実装する前に、データ ソース、つまり検索する必要のあるデータを準備する必要があります。この記事の例では、書籍情報を含む配列を次の形式でデータ ソースとして使用します:

books: [
  {
    id: 1,
    title: 'Vue.js实战',
    author: '梁灏',
    publisher: '人民邮电出版社'
  },
  {
    id: 2,
    title: 'JavaScript高级程序设计',
    author: 'Nicholas C.Zakas',
    publisher: '人民邮电出版社'
  },
  {
    id: 3,
    title: '深入浅出Node.js',
    author: '朴灵',
    publisher: '人民邮电出版社'
  },
  // 更多书籍信息...
]

データ ソースの準備に加えて、入力要素を Vue に追加する必要もあります。ユーザー入力を受け取ります。

<input v-model="keyword" placeholder="请输入关键字进行搜索">

その中で、v-model ディレクティブは、Vue で双方向のデータ バインディングを実装する方法であり、ユーザーが input 要素に入力した値と ## を組み合わせます。 Vue インスタンスの #keyword データの同期更新を実現するために属性をバインドします。

2. computed を使用して検索を実装する

Vue は、データを簡単に処理し、データが変更されたときに自動的に更新できる特別な属性

computed を提供します。 computed を使用して検索機能を実装できます。

この例では、計算属性

filteredBooks を定義して、検索後の結果を保存できます。

computed: {
  filteredBooks() {
    return this.books.filter((book) => {
      return book.title.indexOf(this.keyword) !== -1 || 
             book.author.indexOf(this.keyword) !== -1 ||
             book.publisher.indexOf(this.keyword) !== -1;
    })
  }
}

上記のコードでは、検索キーワード

this.keyword と各書籍のタイトル、著者、出版社を比較し、一致した場合は、対応する書籍が返されます。情報。ここでは配列の filter() メソッドが使用されており、条件を満たすすべての要素を含む新しい配列を返します。

最後に、ページ内で

v-for 命令を使用して、filteredBooks 配列内の各要素をループします。

<ul>
  <li v-for="book in filteredBooks" :key="book.id">
    {{ book.title }} - {{ book.author }} - {{ book.publisher }}
  </li>
</ul>

上記のコードでは、

v-for 命令は、filteredBooks 配列内の各要素を li 要素としてレンダリングし、一意のキー値をバインドします。ここでは、各要素の一意性を確保するために、各書籍の id をキー値として使用します。

3. watch を使用して検索を実装する

計算された属性に加えて、Vue はデータの変更とそれに対応するトリガーを「監視」できる

watch という属性も提供します。データ変更時の操作。 watch 属性を使用して検索機能を実装することもできます。

この例では、監視属性

searchResult を定義して、keyword 属性が変更されたときに検索結果を更新できます。

watch: {
  keyword() {
    this.searchResult = this.books.filter((book) => {
      return book.title.indexOf(this.keyword) !== -1 || 
             book.author.indexOf(this.keyword) !== -1 ||
             book.publisher.indexOf(this.keyword) !== -1;
    })
  }
}

上記のコードでは、

keyword 属性が変更されると、watch 属性の関数がトリガーされます。新しい検索結果を searchResult 属性に保存し、v-for ディレクティブを使用してページをループして検索結果を表示します。

<ul>
  <li v-for="book in searchResult" :key="book.id">
    {{ book.title }} - {{ book.author }} - {{ book.publisher }}
  </li>
</ul>

4. 完全なサンプル コード

これで、Vue に検索機能を実装することができました。以下は完全なコード例です。

<script>
export default {
  data() {
    return {
      books: [
        {
          id: 1,
          title: 'Vue.js实战',
          author: '梁灏',
          publisher: '人民邮电出版社'
        },
        {
          id: 2,
          title: 'JavaScript高级程序设计',
          author: 'Nicholas C.Zakas',
          publisher: '人民邮电出版社'
        },
        {
          id: 3,
          title: '深入浅出Node.js',
          author: '朴灵',
          publisher: '人民邮电出版社'
        },
        // 更多书籍信息...
      ],
      keyword: ''
    }
  },
  computed: {
    filteredBooks() {
      return this.books.filter((book) => {
        return book.title.indexOf(this.keyword) !== -1 || 
              book.author.indexOf(this.keyword) !== -1 ||
              book.publisher.indexOf(this.keyword) !== -1;
      })
    }
  },
  /*watch: {
    keyword() {
      this.searchResult = this.books.filter((book) => {
        return book.title.indexOf(this.keyword) !== -1 || 
               book.author.indexOf(this.keyword) !== -1 ||
               book.publisher.indexOf(this.keyword) !== -1;
      })
    }
  }*/
}
</script>

上記は、計算属性を使用して検索機能を実装するサンプル コードです。 watch 属性を使用して検索機能を実装する必要がある場合は、関連するコードのコメントを解除してください。

概要

この記事では、Vue で検索機能を実装する方法を紹介し、具体的なコード例を示します。 computed 属性と watch 属性のどちらを使用しても、検索機能を効果的に実装できます。実際のアプリケーションでは、特定のニーズに応じて適切な方法を選択し、より良いユーザー エクスペリエンスを実現できます。

以上がVueで検索機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。