Axios/Vuex api query not working, error in params argument

Question

I am using Axios and Vuex in a Vue app which queries the iTunes API, but having problem with getting the entered value from the search/text field. An error is shown for the params argument in the query string. Code is below.

Search box

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

And the searchData function is

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

The error is

Cannot read property 'id' of undefined

at keyup.

So trying to pass the artist name which is put in search box, but not working?

Any tips welcome, Thanks

Is params a computed property which uses the search data property (field value)? Is params an Object with a params property? If not, please show where params come from. But I find it weird that you do async searchData({params}) instead of just searchData(params) — blex
– blex, Commented Mar 13, 2020 at 18:40
Yes its just field value, not an object, must have been asleep.! — Paul Anthony McGowan
– Paul Anthony McGowan, Commented Mar 13, 2020 at 21:20

Amitha Mahesh · Accepted Answer · 2020-03-13 19:25:48Z

2

Try below

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

searchData function

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

either you can use the global variable "search" or "event.target.value". this is working with TypeScript version. Should work with the JS as well.

answered Mar 13, 2020 at 19:25

Amitha Mahesh

3571 silver badge7 bronze badges

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

2 Comments

Paul Anthony McGowan Over a year ago

Ah, yes of course. it is not accessing any api, just an entered field, like artist "madonna" or whatever, to put in the axios get request where this is "${params.id}" so request would look like await this.$http.get(https://itunes.apple.com/search? // term=madonna&entity=album, config); so I need the entered value, as you said. Thanks

Paul Anthony McGowan Over a year ago

This worked, using in the search field @keyup.enter="searchData($event)" and in the function let artist = $event.target.value const response = await this.$http.get(https://itunes.apple.com/search?term=artist&entity=album, config); //store.commit('add', response.data.results); //this.response = response.data console.log(artist) console.log(response)

Ohgodwhy · Accepted Answer · 2020-03-13 19:05:57Z

1

This method:

@keyup.enter="searchData(params)"

Is a Vue event and not a native event. So params in this case is just the value of the text field. It is not an object. You cannot destructure params in the func argument, and you cannot access id off of it, as it will not be an object.

answered Mar 13, 2020 at 19:05

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

Collectives™ on Stack Overflow

Axios/Vuex api query not working, error in params argument

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related