Question

我正在创建VueJS搜索过滤器。我要完成的工作是使“名称”和“文本”彼此相邻对齐并路由到同一链接。我可以毫无问题地将它们组合在一起，只是在尝试搜索时只会显示“名称”。

我尝试对代码进行实验，使“名称”和“文本”都可搜索，但是成功了，除了“名称”和“文本”彼此不对齐。我该如何解决这个问题？：）

<div id="main">
  <br>
<input type="text" v-model="search" class="searchbar" placeholder="Search"/>
<v-list-item class="test-search" v-for="customer in filteredCustomers" :key="customer.name" :description="customer.text" router :to="customer.route">
 <ul>{{customer.name}}</ul>
 </v-list-item>

 <v-list-item class="searching-test" v-for="description in filteredText" :key="description.text" router :to="description.route">
    <ul>{{description.text}}</ul>
 </v-list-item>

</div>
</template>

<script>
export default{
  data(){
    return {
      customers: [
        {name: 'Home', route: '/'},
         {name: 'About', route: '/about'},
          {name: 'Contact', route: '/contact'},
           {name: 'Shop', route: '/shop'},
            {name: 'Terms', route: '/terms'},
           ],
           descriptions: [
             {text: 'abc', route: '/'},
             {text: 'def', route: '/about'},
             {text: 'ghi', route: '/contact'},
             {text: 'jkl', route: '/shop'},
             {text: 'mno', route: '/terms'}
           ],
      search: '' 
    }
  },
computed:{
   filteredCustomers(){
     return this.customers.filter(customer => {
      return customer.name.toLowerCase().includes(this.search.toLowerCase())
})
   },
   filteredText(){
     return this.descriptions.filter(description => {
      return description.text.toLowerCase().includes(this.search.toLowerCase())
    })
   }
  }
}
</script>


<style>
.searchbar{
  background-color: rgba(211, 206, 206, 0.253);
  font-size: 20px;
  padding-right: 1%;
  margin-left: 2%;
}
</style>

搜索过滤器VueJS的名称和文本？

0 个答案: