Vuejs SearchBar ||使用过滤方法不起作用

Question

我对 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>

也是第一次使用 Whosebug，错误请忽略

Answer 1

我在您的代码中没有看到 this.info 的 declaration/initialization。

您收到该错误的原因是过滤器试图运行一个未定义的变量（this.info 是 undefined）。

您可能希望将其初始化为 data 内的一个空数组。

Vuejs SearchBar ||使用过滤方法不起作用

Vuejs SearchBar ||using filter method not working

javascript

vue.js

vuejs2

vue-component

vue-filter