How to implement search function in Vue

In the process of implementing front-end functions, search function is a common requirement. As a popular front-end framework, Vue can also support the implementation of search functions well. This article will introduce how to implement the search function in Vue and provide specific code examples.

1. Preparation

Before implementing the search function, we need to prepare a data source, that is, some data that needs to be searched. In the example of this article, we use an array containing book information as the data source, with the following format:

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

In addition to preparing the data source, we also need to add an input element to Vue to receive user input. .

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

Among them, the v-model directive is a way to implement two-way data binding in Vue. It combines the value entered by the user in the input element with the keyword in the Vue instance. Bind attributes to achieve synchronous update of data.

2. Use computed to implement search

Vue provides a special attribute computed, which can easily process data and automatically update when the data changes. . We can use computed to implement the search function.

In this example, we can define a computed attribute filteredBooks to store the results after the search.

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;
    })
  }
}

In the above code, we compare the search keyword this.keyword with the title, author and publisher of each book. If the match is successful, the corresponding book will be returned. information. The filter() method of the array is used here, which will return a new array containing all elements that meet the conditions.

Finally, we can use the v-for instruction in the page to loop through each element in the filteredBooks array.

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

In the above code, the v-for instruction will render each element in the filteredBooks array as a li element and bind a unique key value. Here we use the id of each book as the key value to ensure the uniqueness of each element.

3. Use watch to implement search

In addition to the computed attribute, Vue also provides an attribute called watch, which can "monitor" data changes and Trigger corresponding operations when data changes. We can also use the watch attribute to implement the search function.

In this example, we can define a watch attribute searchResult to update the search results when the keyword attribute changes.

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;
    })
  }
}

In the above code, the function in the watch attribute will be triggered when the keyword attribute changes. We store the new search results in the searchResult attribute and loop through the page to render the search results using the v-for directive.

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

4. Complete sample code

Now, we have successfully implemented the search function in Vue. Below is the complete code example.

<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>

The above is a sample code that uses the computed attribute to implement the search function. If you need to use the watch attribute to implement the search function, just uncomment the relevant code.

Summary

This article introduces how to implement the search function in Vue and provides specific code examples. Whether you use the computed attribute or the watch attribute, the search function can be effectively implemented. In practical applications, we can choose the appropriate method according to specific needs to achieve a better user experience.

The above is the detailed content of How to implement search function in Vue. For more information, please follow other related articles on the PHP Chinese website!