Axios/Vuex api 查询不工作，params 参数错误答案

【问题标题】：Axios/Vuex api query not working, error in params argumentAxios/Vuex api 查询不工作，params 参数错误
【发布时间】：2020-06-25 18:34:09
【问题描述】：

我在查询 iTunes API 的 Vue 应用程序中使用 Axios 和 Vuex，但在从搜索/文本字段中获取输入值时遇到问题。查询字符串中的 params 参数显示错误。代码如下。

搜索框

<v-text-field 
  v-model="search" 
  autofocus 
  @keyup.enter="searchData(params)" 
  label="Enter Artists Name" 
  append-icon="search">
</v-text-field>

而searchData函数是

async searchData({ params }) {
  let config = {
    headers: {
      'Accept': 'application/json'
    }
  }
  const response = await this.$http.get(`https://itunes.apple.com/search? term=${params.id}&entity=album`, config);
  //store.commit('add', response.data.results);
  console.log(response.data.results);
}
}

错误是

无法读取未定义的属性“id”

在按键时。

所以尝试传递放在搜索框中但不起作用的艺术家姓名？

欢迎任何提示，谢谢

【问题讨论】：

params 是使用search 数据属性（字段值） 的计算属性吗？ params 是具有 params 属性的对象吗？如果不是，请说明params 来自哪里。但我觉得你这样做很奇怪async searchData({params}) 而不仅仅是searchData(params)
是的，它只是字段值，而不是对象，一定是睡着了。！

标签： javascript vue.js axios vuex

【解决方案1】：

试试下面

<v-text-field
      v-model="search"
      autofocus
      @keyup="searchData($event)"
      label="Enter Artists Name"
      append-icon="search"
    ></v-text-field>

搜索数据函数

async searchData(event: any) {

    console.log("value: ", event.target.value)
    console.log("search: ", this.search)
    // let config = {
    //   headers: {
    //     'Accept': 'application/json'
    //   }
    // }
    // const response = await this.$http.get(`https://itunes.apple.com/search? 
    //   term=${params.id}&entity=album`, config);
    // //store.commit('add', response.data.results);
    // console.log(response.data.results);
    //}
  }

您可以使用全局变量“search”或“event.target.value”。这适用于 TypeScript 版本。应该也可以与 JS 一起使用。

【讨论】：

啊，当然可以。它没有访问任何 api，只是一个输入的字段，如艺术家“madonna”或其他任何东西，放入 axios get 请求，这是“${params.id}”，所以请求看起来像 await this.$http.get （https://itunes.apple.com/search? // term=madonna&entity=album，配置）；所以我需要输入的值，正如你所说。谢谢
这行得通，在搜索字段中使用 @keyup.enter="searchData($event)" 和函数 let artist = $event.target.value const response = await this.$http。获取（https://itunes.apple.com/search?term=artist&entity=album，配置）； //store.commit('add', response.data.results); //this.response = response.data console.log(artist) console.log(response)

【解决方案2】：

这个方法：

@keyup.enter="searchData(params)"

是Vue 事件而不是本地事件。所以params 在这种情况下只是文本字段的值。它不是一个对象。您不能在 func 参数中解构 params，也不能从中访问 id，因为它不是对象。

【讨论】：