使用 VUE.js 中的输入字段搜索类别

Question

我有点小问题，如果有人能帮助我，我将不胜感激。

我必须为每个类别列出类别和子类别。我必须放置一个输入字段来搜索类别和子类别的标题，但我不知道如何在 vue.js

中执行此操作

例如，如果我有这样的东西

类别 1 水果及其子类别香蕉、苹果。

第 2 类图书及其子类别戏剧、浪漫

如果我在搜索字段中写水果，它应该 return 水果（香蕉、苹果）。如果我在搜索字段中写 Romance，它应该 return Books (Romance)

提前致谢！

<table>
<input type="text" v-model="search" placeholder="Search">
 <div> <p>Fruit</p> </div>
<tr v-for="fruit in fruits" :key="fruit.id">
                                
<div v-if="fruit.id == 1" >                             
<a href="Banana" target="_blank">{{fruit.name}}</a>      
</div>
<div v-if="fruit.id == 2" >                             
<a href="Apple" target="_blank">{{fruit.name}}</a>                                   </div>        
</tr>
<br>
<div> <p>Books</p> </div>
<tr v-for="book in books" :key="book.id">
                                
<div v-if="book.id == 1" >                             
<a href="Drama" target="_blank">{{book.name}}</a>      
</div>
<div v-if="fruit.id == 2" >                             
<a href="Romance" target="_blank">{{book.name}}</a>                                   </div>        
</tr>
</table>


data() {
   return {
search:'',
fruititems: [
{name:Banana, id:1},
{name:Apple}, id:2}
],
bookitems: [
{name:Drama, id:1},
{name:Romance}, id:2}
],
}}

computed:{
fruits() {
 return this.fruits.filter(fruit => 
 fruit.name.toLowerCase().includes(this.search.toLowerCase()))},
books() {
 return this.books.filter(book => 
 fruit.name.toLowerCase().includes(this.search.toLowerCase()))},
}

Answer 1

我相信这样的事情？ https://stackblitz.com/edit/vue2-vue-cli-pvbeex?file=src%2FApp.vue

保留代码历史记录

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <div>
    <input type="text" v-model="search" />
    <div v-for="category in getfiltered">
      <h2>{{ category.name }}</h2>
      <ul>
        <li v-for="sub in category.subCategories">
          {{ sub }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    search: '',
    categories: [
      {
        name: 'fruits',
        subCategories: ['Apple', 'Banana'],
      },
      {
        name: 'books',
        subCategories: ['Drama', 'Romance'],
      },
    ],
  }),
  computed: {
    getfiltered: function () {
      return this.categories.filter((category) => {
        return (
          this.search.length < 2 ||
          category.name.includes(this.search) ||
          category.subCategories.find((sub) => sub.includes(this.search))
        )
      })
    },
  },
}
</script>

使用 VUE.js 中的输入字段搜索类别

Search categories with input field in VUE.js

search

filter

vue.js