Фильтр поиска для данных, отображаемых с использованием карт VUE

Question

Я использую карты для отображения данных из базы данных, и я хочу реализовать поисковый фильтр для фильтрации данных на основе любого типа пользователя.Я не уверен, как это сделать, поэтому я просто следовал некоторым учебникам из W3school.Код не работает.Пока это то, что я сделал:

Vue Component

<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.js есть хороший учебник, вам просто нужно заменить этот оператор по модулю на сравнение строк.

Кроме того, вы можете использовать двустороннюю привязку поля поиска.

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

Answer 2

Vue имеет списки событий, которые вы можете использовать непосредственно в DOM.Таким образом, вместо создания функции «filter» и ее запуска на смонтированном, вы можете использовать атрибут v-model в поле ввода, чтобы в реальном времени связывать предоставленное пользователем значение с переменной, такой как this.filter

С помощью этой переменной вы можете создать вычисляемую функцию , которая возвращает отфильтрованные данные.Затем вы можете изменить "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>