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

Question

我正在使用卡片来显示数据库中的数据，我想实现一个搜索过滤器来根据用户类型过滤数据。我不知道该怎么做，所以我只是按照 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.')
    }
}

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

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