我看你在实现前端搜索筛选和初始数据过滤时遇到了一些问题，咱们一步步来修正：

核心问题梳理 #

• 计算属性与模板绑定不匹配：你定义的计算属性是axiosParameters，但分页组件用的是filteredArticles，导致筛选逻辑根本没生效
• 初始排除最后三篇的逻辑缺失：没有处理初始状态下移除最后三个条目的需求
• 混淆了前端筛选与API参数：你的计算属性里误用了SearchParams，这里是本地数据筛选，不需要给API传参数
• openArticle方法存在错误：无法正确获取对应文章的链接

修正后的完整代码 #

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

<script>
import axios from "axios";
import moment from "moment";
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;
        });
    },
    formatDate(date) {
      return moment(date).format("ll");
    },
    openArticle(articleUrl) {
      if (articleUrl) {
        window.open(articleUrl, "_blank");
      }
    },
  },
  computed: {
    filteredArticles() {
      // 先移除最后三篇文章
      let processedItems = this.items.slice(0, -3);
      
      // 如果有搜索关键词，执行标题筛选（大小写不敏感）
      if (this.search) {
        const searchKeyword = this.search.toLowerCase();
        processedItems = processedItems.filter(item => 
          item.title.toLowerCase().includes(searchKeyword)
        );
      }
      
      return processedItems;
    },
  },
};
</script>

关键修改说明 #

1. 对齐计算属性与模板绑定：将计算属性重命名为filteredArticles，和分页组件的:list绑定对应，确保筛选逻辑被调用
2. 实现初始数据过滤：用slice(0, -3)直接移除数组最后三个元素，满足初始排除要求
3. 优化搜索体验：把搜索关键词和标题都转成小写，实现大小写不敏感的匹配，避免用户因为大小写输入导致搜不到结果
4. 修复文章跳转方法：通过参数传递当前文章的链接，添加空值判断避免无效跳转，同时给"Explore More"添加鼠标指针样式提示
5. 简化图片渲染：用可选链操作符?.替代&&，语法更简洁安全

这样修改后，页面初始状态会自动排除最后三篇文章，搜索框输入关键词时会实时筛选标题匹配的内容，分页也会基于筛选后的结果正常工作。

内容的提问来源于stack exchange，提问作者Balazs Kelemen