[英]Vuejs SearchBar ||using filter method not working
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我对 Vue js 很陌生 我正在尝试使用计算方法创建一个搜索栏来仅搜索名称,但我得到“this.info.filter”不是 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第一次使用 StackOverflow 请忽略错误
I don't see a declaration/initialization for this.info
anywhere in your code.我在您的代码中的任何地方都没有看到
this.info
的声明/初始化。
The reason you're getting that error is because filter is trying to run on an undefined variable ( this.info
is undefined
).您收到该错误的原因是因为过滤器试图在未定义的变量上运行(
this.info
undefined
)。
You might want to initialize that to an empty array within data
.您可能希望将其初始化为
data
中的空数组。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.