使用卡片 vue 显示数据的搜索过滤器

Posted 2023-02-22

【中文标题】使用卡片 vue 显示数据的搜索过滤器

【英文标题】：Search filter for data displayed using cards vue

【发布时间】：2019-09-02 02:12:52

【问题描述】：

我正在使用卡片来显示数据库中的数据，我想实现一个搜索过滤器来根据用户类型过滤数据。我不知道该怎么做，所以我只是按照 W3school 的一些教程进行操作。代码不起作用。到目前为止，这就是我所做的：

Vue 组件

<table class="table col-md-12" style="background-color:white;">
<thead class="thead white" style="background-color:#3F51B5">
    <th>Unassigned
        <input class="form-control w-50 float-right" type="text" id="myInput">
    </th>
</thead>
<tbody>
    <div class="card col-md-11 mt-3 mx-auto" v-for="(uStudent,index) in uStudents" v-bind:key="uStudent.student_id"  id="myList">
        <div class="card-body">
            <div class="row">
            <h6 class="card-subtitle text-muted col-md-1 my-auto">#index+1</h6>
            <h6 class="card-subtitle text-muted col-md-2 my-auto">uStudent.student_id</h6>
            <h6 class="card-subtitle text-muted col-md-6 my-auto">uStudent.student_name</h6>
            <h6 class="card-subtitle text-muted col-md-2 my-auto">uStudent.company_state</h6>
            <a href="" class="col-md-1" @click="setLectureFK(uStudent.student_id)"><i class="fas fa-user-plus"></i></a>
            </div>  
        </div>
    </div>                                                
</tbody>

脚本

<script>
export default 
    data () 
        return 
        uStudents:[],
        
    ,
    methods:
        getUnassignedStudents()
             axios.get(`/api/internship/unassignedStudents/$this.$route.params.id`).then(response => this.uStudents = response.data);               
        ,
        filter()
        $("#myInput").on("keyup", function() 
            var value = $(this).val().toLowerCase();
            $("#myList").filter(function() 
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            );
        );
        
    ,
    mounted() 
        this.filter();
        console.log('Component mounted.')
    

【参考方案1】：

Vue 有事件监听器，你可以直接在 DOM 中使用。 因此，您可以在输入字段上使用v-model 属性将用户提供的值实时绑定到变量，例如this.filter

，而不是创建函数“过滤器”并在挂载时运行它

您可以使用该变量创建一个返回过滤数据的computed function。然后，您可以使用计算函数更改“uStudents”并在 v-for 中使用它。

我将在下面提供一个示例

编辑：链接过滤器有时是合适的，但我认为在这个例子中，最好将整个逻辑写在过滤器的回调函数中。

所以不是默认的

this.uStudents.filter(user => user.student_name.toUpperCase().includes(this.filter.toUpperCase()))

查看下面的代码示例如何在一个过滤器中实现多个过滤条件。

new Vue(
  el: '#app',
  data() 
    return 
      uStudents: [
        student_id: 1, student_name: 'Alex', company_state: 'Ohio',
        student_id: 2, student_name: 'Jane', company_state: 'Alabama',
      ],
      filter: ''
    
  ,
  computed: 
    filteredStudents() 
      return this.uStudents.filter(user => 
        const filter = this.filter.toUpperCase();
        const hasIdMatch = String(user.student_id).includes(filter);
        const hasNameMatch = user.student_name.toUpperCase().includes(filter);
        
        return hasIdMatch || hasNameMatch;
      )
    
  ,
  methods: 
    getUnassignedStudents() 
      axios.get(`/api/internship/unassignedStudents/$this.$route.params.id`).then(response => this.uStudents = response.data);
    ,
  ,
  mounted() 
    console.log('Component mounted.')
  
)

.row 
  display: flex;
  justify-content: space-between;
  max-width: 200px;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<table class="table col-md-12" style="background-color:white;">
  <thead class="thead white" style="background-color:#3F51B5">
    <th>Unassigned
      <input class="form-control w-50 float-right" type="text" id="myInput" v-model="filter">
    </th>
  </thead>
  <tbody>
    <div class="card col-md-11 mt-3 mx-auto" v-for="(uStudent,index) in filteredStudents" v-bind:key="uStudent.student_id" id="myList">
      <div class="card-body">
        <div class="row">
          <h6 class="card-subtitle text-muted col-md-1 my-auto">#index+1</h6>
          <h6 class="card-subtitle text-muted col-md-2 my-auto">uStudent.student_id</h6>
          <h6 class="card-subtitle text-muted col-md-6 my-auto">uStudent.student_name</h6>
          <h6 class="card-subtitle text-muted col-md-2 my-auto">uStudent.company_state</h6>
          <a href="" class="col-md-1" @click="setLectureFK(uStudent.student_id)"><i class="fas fa-user-plus"></i></a>
        </div>
      </div>
    </div>
  </tbody>
  </table>
  </div>

【讨论】：

还有一个，这是按名称过滤吧？如何为所有内容设置过滤器？ id,name,state.

是的！例如，您可以将过滤器链接在一起。喜欢：this.uStudents.filter(name logic here).filter(age logic here)等

我尝试像这样链接它们，但它不起作用。 return this.uStudents.filter(user =>user.student_name.toUpperCase().includes(this.filter.toUpperCase())).filter(user => user.student_id.toUpperCase().includes(this.filter.toUpperCase ()))

【参考方案2】：

Vue.js documentation其实有一个很好的教程，你只需要将这个模运算符替换为你的字符串比较。

除此之外，您还可以使用搜索字段的双向绑定。

export default 
  data () 
    return 
      uStudents:[],
      filterValue: ''
    
  ,
  computed: 
    filteredStudents: function () 
      return this.uStudents.filter(function (value) 
        return /* your comparison function using this.filterValue */
      )
    ,
  methods:
    /* your axios call */
  

之后，将您的 v-for 替换为 v-for="(uStudent,index) in filteredStudents 并将您的过滤器输入更改为

<input class="form-control w-50 float-right" type="text" id="myInput" v-model="filterValue">

【讨论】：

但是如果我做 v-for ".... in filteredStudents"，它不会只显示过滤结果而所有其他数据都消失了吗？我的意思是如果搜索框是空的，那么它就不会显示任何数据了？

您可以在过滤器函数中包含 OR：return value.student_name.toUpperCase().includes(this.filterValue.toUpperCase()) || this.uStudents