如何使用Axios (vuejs)中的参数？

Question

大家早上好，

我得到了一个API，我从那里获取数据。

我试着用Axios过滤，但是我没有得到我期望的结果。

我创建了一个搜索框。我创建了一个计算过滤器，并将其应用于Axios。

我只想在我的flexboxes中看到搜索结果(除了作为开始的最后三篇文章)

<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 && item.image.file" /></div>

        <div id="date">{{ formatDate(item.pub_date) }}</div>

        <div id="title">{{ item.title }}</div>

        <div id="article" v-html="item.details_en" target="blank">
          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`,
          { params }
        )
        .then((response) => {
          this.items = response.data.results;
        });
    },
    formatDate(date) {
      return moment(date).format("ll");
    },
    openArticle() {
      window.open(this.items.details_en, "blank");
    },
  },
  computed: {
    axiosParameters() {
      const params = new SearchParams();
      if (!this.search) {
        return this.items;
      }
      return this.items.filter((item) => {
        return item.title.includes(this.search);
      });
    },
  },
};
</script>

Answer 1

这是实现vue观察器的基本代码，以及搜索功能的去掉。

import _ from "lodash"  // need to install lodash library

data() {
  return {
    search: "",
  };
},

watch:{
    search: _.debounce(function (newVal) {
      if (newVal) {
        // place your search logic here
      } else{
        // show the data you want to show when the search input is blank
      }
    }, 1000),
}

说明：

我们已经在search变量上放置了一个监视器。每当它检测到search变量中的任何更改时，如果它的值不为空，它将执行if代码块。如果search变量的值为空，它将执行else阻塞。

在这里添加debounce的作用是，它将在执行代码块时延迟1秒，因为我们不想对搜索框中输入的每个字符执行相同的代码。确保您安装并导入了lodash库。有关Lodash - Debounce的更多信息，请参阅here。

注意：这不是这个问题的确切答案，但由于问题所有者在评论部分提出了这个问题，以下是基本的代码示例。