我正在从《星球大战》 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>
答案 0 :(得分:2)
在加载组件时,使用“ 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>
答案 1 :(得分:0)
您可以使用
computed: {
filteredPeople() {
if (this.people) {
return this.people.filter((person) => {
return person.name.match(this.search);
});
}
return false;
}
}