如何在 Vue Js 中通过 axios 调出查询

Question

我正在尝试使用 url 调用查询搜索，如下所示：

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

在 Vue Js 2.0 中试图调用这样的东西：

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

它看起来像这样

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

它没有转换数据。帮我解决这个问题。

谢谢。

Answer 1

当您在字符串中显式写出变量时，您并不是在引用变量。

做这样的事情：

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

Answer 2

您需要使用字符串插值。它是这样的：

let variable = 'dog';

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

console.log(string);

要点是你需要用``包围字符串，变量需要用${}包裹。所以对于你的例子，它应该使用：

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

顺便说一句，我替换了 'page=' 之前的“$”符号，因为它对我来说是个错误。如果不是，请注意我更改了它。

编辑：我还假设当您使用 $(this.query) 等时，您正在调用 jQuery。也有可能您只是错误地使用了字符串插值，因此需要将 paranetheses 替换为 {}。

Answer 3

首先构建字符串。如果您将变量放入字符串中（您的 axios 调用的第一个参数）......在 javascript 中，这些变量将不会评估。

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

进一步阅读：https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String

Answer 4

Axios Request Config 有更优雅的方式：

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

如何在 Vue Js 中通过 axios 调出查询

How call out queries through axios in Vue Js

javascript

vue.js

axios

vuejs2