带搜索栏的vue js过滤

Question

我已经创建了一个应用程序，它从API中请求数据并创建柔性盒。现在我添加了一个搜索框，我想通过它们的联系人和/或标题来过滤这些文章。

我还创建了一个计算属性来筛选返回的项列表，但是当我在第11行中将paginated('items')替换为不返回任何内容的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>

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字段，并且它区分大小写。