【问题标题】:Javascript - How to search no matter upperCase or lowercase in Vue.js?Javascript - 如何在 Vue.js 中搜索大写或小写?
【发布时间】:2021-07-04 20:26:37
【问题描述】:

我正在使用 Vue.js 3,在这里我搜索了数据,但这些数据来自假 API。所以这个搜索只适用于小字符或大字符,但我想搜索大写或小写的抛出数据? 这是我的代码

<template>
  <div class='home'>
      <h1>Third</h1>
      <div v-if="error"> {{error}} </div>
      <div v-if="posts.length">
         <input type="text" v-model.trim="search" />
         <!-- <p>search term - {{search}}</p> -->
          <div v-for="post in matchingNames" :key='post.id'>
            <h3>{{post.title }}</h3>
            <h1>{{post.id}}</h1>
          </div>
      </div>
    <div v-else> Loading...</div>
  </div>
</template>

<script>
import { computed, ref, watch, watchEffect} from 'vue'
// import Listing from '../components/Listing.vue' 
import getPosts from '../composables/getPosts'

export default {
    name:'Third',
    components: {} ,
    setup(){ 

      const search = ref('')

      const{posts,error,load} = getPosts()

      load()

      const matchingNames = computed (()=> {  
      return posts.value.filter((post)=>post.title.match(search.value)) 
    })
     

      return {posts, error, search, matchingNames}
    }
}
</script>

<style>

</style>

我也试过用includes js方法替换match方法但是结果是一样的

这是现在如何工作的 gif,谁能帮助我我是 Vue.js 3 的新手

【问题讨论】:

    标签: javascript api vue.js search match


    【解决方案1】:

    先将两者都转换为小写:)

    ...
    return posts.value.filter((post)=>post.title.toLowerCase().includes(search.value.toLowerCase()))
    ...
    

    【讨论】:

    • 非常感谢!这完美!我在过滤器和排序方面遇到了一些问题,如果您愿意提供帮助,我可以在接下来的几天里问您一些问题吗? :)
    • @Vesko_dev 我很高兴它有效!我无法直接提供帮助,抱歉。但是在这个网站上提出更多问题,如果我看到他们,我会很乐意提供帮助! :) 这样其他人也将从答案中受益! :)
    猜你喜欢
    • 2017-02-21
    • 1970-01-01
    • 2017-07-31
    • 1970-01-01
    • 2023-03-10
    • 1970-01-01
    • 2013-08-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多