Не работает Axi / Vuex API-запрос, ошибка в аргументе params - PullRequest
Новая
       36

Не работает Axi / Vuex API-запрос, ошибка в аргументе params

1 голос
/ 13 марта 2020

Я использую Ax ios и Vuex в приложении Vue, которое запрашивает API iTunes, но не может получить введенное значение из поля поиска / текста. Ошибка отображается для аргумента 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' из неопределенного

в keyup.

Итак, вы пытаетесь передать имя исполнителя, которое указано в окне поиска, но не работает?

Любые советы приветствуются Спасибо

Ответы [ 2 ]

1 голос
/ 13 марта 2020

Попробуйте ниже 

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

Функция searchData 

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.

1 голос
/ 13 марта 2020

Этот метод: 

@keyup.enter="searchData(params)"

Является событием Vue, а не собственным событием. Так что params в данном случае это просто значение текстового поля. Это не объект. Вы не можете деструктурировать params в аргументе fun c и не можете получить к нему доступ id, поскольку он не будет объектом.

...