How call out queries through axios in Vue Js

Question

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.

thanksd · Accepted Answer · 2017-05-19 15:09:16Z

1

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

answered May 19, 2017 at 15:09

thanksd

55.8k23 gold badges167 silver badges155 bronze badges

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

Comments

Robert Taussig · Accepted Answer · 2017-05-19 15:10:27Z

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 {}.

admcfajn · Accepted Answer · 2017-05-19 15:16:40Z

1

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

answered May 19, 2017 at 15:16

admcfajn

2,1224 gold badges26 silver badges36 bronze badges

Comments

Reinhard · Accepted Answer · 2017-06-04 17:24:17Z

0

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) => { 
        ...

answered Jun 4, 2017 at 17:24

Reinhard

1,7761 gold badge21 silver badges28 bronze badges

Collectives™ on Stack Overflow

How call out queries through axios in Vue Js

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related