How to use parameters in Axios (vuejs)?

Question

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>

You should add a watcher (probably with some debouncing) for the search variable - which will make the AJAX request any time you type something in the searchbox. — IVO GELOV
– IVO GELOV, Commented Nov 9, 2021 at 13:03
The best source of information is the Vue documentation - vuejs.org/v2/api/#watch — IVO GELOV
– IVO GELOV, Commented Nov 9, 2021 at 15:23

Shreeraj · Accepted Answer · 2021-11-09 20:20:34Z

1

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.

answered Nov 9, 2021 at 20:20

Shreeraj

7671 gold badge9 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Balazs Kelemen Over a year ago

hi @Sheeraj, I was told that I can use something like this: for the input please use this event and call the axios function with which you get the data in the event function @input="changeSearchtext()" Where do i create this function? In methods, computed? or at the axios directly?

Shreeraj Over a year ago

@BalazsKelemen I am not sure why do you need to call the function in @input but if that is the requirement that you must create the function in methods. You cannot use computed property in @input.

Collectives™ on Stack Overflow

How to use parameters in Axios (vuejs)?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related