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

Question

我有个小问题，如果有人能帮我，我会非常感激的。

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

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

第1类水果与亚类香蕉，苹果。

第2类有子类别的书籍--戏剧、浪漫

如果我在搜索字段中写水果，它应该返回果树(香蕉，苹果)。如果我在搜索字段中写浪漫，它应该返回图书(浪漫)

提前感谢！

​

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

​