CODEWITHSUNDEEP
javascriptvue.jsvuejs2axios
Nitish Kumar
Nitish Kumar

Reputation: 6276

How call out queries through axios in Vue Js

I'm trying to call a query search with url something like this:

http://localhost/Stellar/public/api/companies?column=name&direction=desc&page=1

In Vue Js 2.0 in trying to call something like this:

axios.get('$(this.source)?column=$(this.query.column)&direction=$(this.query.direction)$page=$(this.query.page)')

It is appearing something like this 

http://localhost/Stellar/public/$(this.source)?column=$(this.query.column)&direction=$(this.query.direction)$page=$(this.query.page)

It is not converting the data. Help me out in this.

Thanks.

Upvotes: 2

Views: 1562

Answers (4)

Reinhard
Reinhard

Reputation: 1746

There is a more elegant way with the Axios Request Config:

const url = "mysite.com";
const config = {
   params: {
       column: 42,
       direction: 'up'
    }
}
return axios.get(url, config)
   .then((response) => { 
        ...

Upvotes: 0

admcfajn
admcfajn

Reputation: 2083

Build the string first. If you put variables into a string (the first argument of your axios call)... In javascript those variables won't evaluate. 

let dest = this.source+'?column='+this.query.column+'&direction='+this.query.direction+'&page='+this.query.page;

axios.get(dest).then(response=>{
  console.log(response.data);
});

further reading: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String

Upvotes: 1

Robert Taussig
Robert Taussig

Reputation: 581

You'll need to use string interpolation. It goes something like this:

let variable = 'dog';

let string = `This is a string using string interpolation. The variable is: ${variable}`;

console.log(string);

The gist of it is you need to surround the string with ``, and variables need to be wrapped in ${}. So for your example, it should use:

axios.get(`${$(this.source)}?column=${$(this.query.column)}&direction=${$(this.query.direction)}&page=${$(this.query.page)}`);

Btw, I replaced the '$' sign before 'page=' as it looked like a mistake to me. If it wasn't, just note that I changed it.

edit: I'm also assuming that when you are using $(this.query), etc, that you are invoking jQuery. It is also possible that you are just using string interpolation incorrectly, and therefore need to replace the paranetheses with {}.

Upvotes: 1

thanksd
thanksd

Reputation: 55634

You're not referencing your variables when you explicitly write them out in a string.

Do something like this:

let source = this.source;
let column = this.query.column;
let direction = this.query.direction;
let page = this.query.page;

axios.get(source+"?column="+column+"&direction="+direction+"&page="+page);

Upvotes: 1

Related Questions