我創建了一個從 API 請求資料并創建 flexbox 的應用程式。現在我添加了一個搜索框，我想通過他們的聯系方式和/或標題過濾文章。
我還創建了一個計算屬性來過濾回傳的專案串列，但是當我在第 11 行替換paginated('items')with 時paginated('filteredArticles')，它不回傳任何內容。我做錯了什么？
<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>
uj5u.com熱心網友回復：
你的計算似乎不正確。由于items是一個物件陣列，您需要這樣做：
filteredArticles() {
if (!this.search) {
return this.items;
}
return this.items.filter(item => {
return item.title.includes(this.search);
})
}
請注意，這只會搜索該title欄位，并且區分大小寫。
uj5u.com熱心網友回復：
您需要使用toLowerCase()or搜索和轉換搜索字串和欄位的欄位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()));
})
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/342591.html
上一篇：VueJs3-Vuex：未捕獲的型別錯誤：商店不是函式
下一篇：在vuejs中創建子部分不起作用