Vuejs SearchBar ||using filter method not working

Question

I quite new to Vue js I am trying to use the computed method to create a search bar to only search through the name but I'm getting "this.info.filter" is not a function

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

First time using StackOverflow too please ignore the errors

Answer 1

I don't see a declaration/initialization for this.info anywhere in your code.

The reason you're getting that error is because filter is trying to run on an undefined variable (this.info is undefined).

You might want to initialize that to an empty array within data.