vue js过滤搜索栏

Question

我创建了一个应用程序，从API请求数据并创建flexbox。现在我添加了一个搜索框，我想通过他们的联系人和/或标题来过滤文章。

我还创建了一个计算属性来过滤返回的项目列表，但是当我在第11行用paginated('filteredArticles')替换paginated('items')时，没有返回任何内容。我做错了什么?

<template>
<div id="app">
<div class="search-wrapper">
<input type="text" 
class="search-bar" 
v-model="search"
placeholder="Search in the articles"/>
</div>
<paginate ref="paginator" class="flex-container" name="items" :list="items">
<li v-for="(item, index) in paginated('items')" :key="index" class="flex-item">
<div id="image"><img :src="item.image && item.image.file" /></div>
<div id="date">{{ item.pub_date }}</div>
<div id="title"> {{ item.title }}</div>
<div class="article">{{item.details_en}}</div>
</li>
</paginate>
<paginate-links for="items" :limit="2" :show-step-links="true"></paginate-links>
</div>
</template>

<script>
import axios from "axios";
export default {
data() {
return {
items: [],
paginate: ["items"],
search:'',
};
},
created() {
this.loadPressRelease();
},
methods: {
loadPressRelease() {
axios
.get(`https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/?page_size=61&type=5`)
.then((response) => {
this.items = response.data.results;
});
},
},
computed:{
filteredArticles() {
return this.items.filter(item=>item.includes(this.search))
}
}
};
</script>

Answer 1

您需要搜索的字段，并将搜索字符串和字段与toLowerCase()或toUpperCase()转换:

computed : {
filteredArticles() {
if (!this.search) return this.items
return this.items.filter(item => {
return (item.title.toLowerCase().includes(this.search.toLowerCase()) || item.contact.toLowerCase().includes(this.search.toLowerCase()));
})
}
}

Answer 2

您的计算似乎不正确。由于items是一个对象数组，您需要这样做:

filteredArticles() {
if (!this.search) {
return this.items;
}
return this.items.filter(item => {
return item.title.includes(this.search);
})
}

请注意，这将只搜索title字段，并且它是区分大小写的。