CODEWITHSUNDEEP
vue.jsaxios
Balazs Kelemen
Balazs Kelemen

Reputation: 109

How to use parameters in Axios (vuejs)?

Good morning Folks,

I got an API from where I am getting the data from.

I am trying to filter that with Axios but I don`t get the result that I am expecting.

I created a search box. I created a computed filter and that I applied on the Axios.

I would like to see only the searched results in my flexboxes (apart from the last three articles as a start)

<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>

Upvotes: 1

Views: 666

Answers (1)

Shreeraj
Shreeraj

Reputation: 767

Here is the basic code for implementing vue watcher along with the debounce for search functionality.

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),
}

Explanation:

We have placed a watcher on search variable. Whenever it detects any change in search variable, it will execute the if block of code if it's value is not empty. If the value of search variable goes empty, it will execute else block.

The role of adding debounce here is, it will put a delay of 1 sec in executing the block of code, as we don't want to execute the same code on every single character input in the search box. Make sure you install and import lodash library. For more info on Lodash - Debounce, please refer here.

Note: This is not the exact answer for this question, but as it is asked by the question owner in the comment section, here is the basic example with code.

Upvotes: 1

Related Questions