[英]How to create a search filter using Vue js from API Data?
我正在从 Star Wars API 获取数据,更具体地说是人们,它正在工作。 我想创建一个搜索过滤器功能,当我开始输入时,只显示带有这些字母的名称。 这是我在 StarWarsPeopleComponent.vue 文件中获取数据的代码:
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<input type='text' v-model="search" placeholder='Search people...'/><br>
{{ getAllStarWarsPeople() }}
<ul>
<li v-for="person in people.results">
{{ person.name }}
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: "StarWarsPeopleComponent",
data() {
return {
people: [],
search: ''
}
},
mounted() {
console.log('Component mounted.')
},
methods:{
getAllStarWarsPeople() {
fetch("https://swapi.co/api/people/")
.then(response=>response.json())
.then(data=>{
this.people=data;
})
}
}
}
</script>
请注意我如何使用 people.results 访问 v-for 中的数据。
这是我使用我创建的计算函数更新的组件,但现在数据未显示,我收到此错误:
[Vue warn]: Error in render: "TypeError: this.people.filter is not a function".
我对 Vue js 很陌生,我不知道这意味着什么或如何解决它。 任何人都可以帮忙吗?
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<input type='text' v-model="search" placeholder='Search people...'/><br>
{{ getAllStarWarsPeople() }}
<ul>
<li v-for="person in filteredPeople">
{{ person.name }}
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: "StarWarsPeopleComponent",
data() {
return {
people: [],
search: ''
}
},
mounted() {
console.log('Component mounted.')
},
methods:{
getAllStarWarsPeople() {
fetch("https://swapi.co/api/people/")
.then(response=>response.json())
.then(data=>{
this.people=data;
})
}
},
computed: {
filteredPeople: function() {
return this.people.filter((person) => {
return person.name.match(this.search);
});
}
}
}
</script>
在加载组件时使用“created()”调用 getAllStarWarsPeople()。
在输入字段中将 getAllStarWarsPeople 添加为“@keyup”。
尝试这个:
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<input
type="text"
v-model.trim="search"
placeholder="Search people..."
@keyup="getAllStarWarsPeople"
/><br />
<ul>
<li v-for="person in people" :key="person.id">
{{ person.name }}
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: "StarWarsPeopleComponent",
data() {
return {
people: [],
search: ""
};
},
mounted() {
console.log("Component mounted.");
},
methods: {
getAllStarWarsPeople() {
fetch("https://swapi.co/api/people/")
.then(response => response.json())
.then(res => {
if (this.search) {
this.people = res.results.filter(people =>
people.name.toLowerCase().includes(this.search.toLowerCase())
);
} else {
this.people = res.results;
}
});
}
},
created() {
this.getAllStarWarsPeople();
}
};
</script>
JsFiddle在这里:
new Vue({ el: "#app", data: { people: [], search: "" }, methods: { getAllStarWarsPeople() { fetch("https://swapi.co/api/people/") .then(response => response.json()) .then(res => { if (this.search) { this.people = res.results.filter(people => people.name.toLowerCase().includes(this.search.toLowerCase()) ); } else { this.people = res.results; } }); } }, created() { this.getAllStarWarsPeople(); } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <input type="text" v-model.trim="search" placeholder="Search people..." @keyup="getAllStarWarsPeople" /><br /> <ul> <li v-for="person in people" :key="person.id"> {{ person.name }} </li> </ul> </div>
你可以使用像
computed: { filteredPeople() { if (this.people) { return this.people.filter((person) => { return person.name.match(this.search); }); } return false; } }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.