Блог

Главная - Вопросы по программированию - Панель поиска Vuejs || использование метода фильтрации не работает

Панель поиска Vuejs || использование метода фильтрации не работает

#javascript #vue.js #vuejs2 #vue-component #vue-filter

#javascript #vue.js #vuejs2 #vue-компонент #vue-фильтр

Вопрос:

Я новичок в Vue js, я пытаюсь использовать вычисляемый метод для создания панели поиска только для поиска по имени, но я получаю «this.info.filter» — это не функция

 <template>
<div class="container">
  <input type="text" v-model="search" placeholder="Search by name">
   <div class="content" v-for="student in filterName " v-bind:key="student.id">
      <img class="image" :src="student.pic" alt="">
      <div class="student-info">
          <h1 class="info">{{student.firstName  " "  student.lastName}}</h1>
          <div class="infomation">
            <p class="cop">{{ student.company }}</p>
            <p class="ski">{{ student.skill }}</p>
            <p class="email">{{ student.email }}</p>
            <p class="grade">{{ student.grades }}</p>
          </div>
      </div>
  </div>
</div>
</template>

<script>

import axios from "axios";
export default {
  name: "Student.vue",
  data() {
    return {
      students: '',
      search: ''
    }
  },
  mounted() {
    axios
        .get('https://api.hatchways.io/assessment/students')
        .then((res) => {
          this.students = (res.data.students)
        })
  },
  computed :{
    filterName:function (){
      return this.info.filter((student)=>{
        return student.company.matcth(this.search);
      })
    }
  }
}
</script>

</style> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

При первом использовании StackOverflow также, пожалуйста, игнорируйте ошибки

Комментарии:

1. это match не должно быть matcth

2. Внутри функции filterName ключевое this слово ссылается на ту самую функцию, у которой нет свойства info …

Ответ №1:

Я не вижу объявления / инициализации this.info нигде в вашем коде.

Причина, по которой вы получаете эту ошибку, заключается в том, что filter пытается запустить неопределенную переменную ( this.info is undefined ).

Возможно, вы захотите инициализировать это в пустой массив внутри data .