How do I use qs.stringify in Vue 3?

user_12921391 0
Viewed 58

I'm trying to use qs stringify to encode URL parameters in a Vue Axios call. In my main.js I have the following:

import { createApp } from 'vue'
import Search from './Search.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import qs from 'qs'

const search = createApp(Search);
search.use(VueAxios, axios, qs);
search.mount('#v_search_app');

Then in Search.vue, I have the following:

let params = {
  "q": this.q,
  "page": this.page,
  "per_page": this.perPage,
  "filters": { 
    "page": {
      "source_table_enum": this.selectedSources
      "topic_id": this.selectedTopics
    }
  }
}
let queryString = this.qs.stringify(params);

This results in the following error:

Uncaught TypeError: Cannot read properties of undefined (reading 'stringify')

What am I doing wrong?

vuejs3
1 Answers

In your Search.vue, you should do this:

import qs from 'qs'
let queryString = qs.stringify(params)

You have to import the library into the component you want to use it.

user_42546810
Related