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

搜索过滤器以使用Card Vue显示的数据

2 个答案: