programing

Axios/Vuex api 쿼리가 작동하지 않음, 매개 변수 오류

prostudy 2022. 5. 11. 22:03
반응형

Axios/Vuex api 쿼리가 작동하지 않음, 매개 변수 오류

iTunes API를 쿼리하는 Vue 앱에서 Axios와 Vuex를 사용하고 있지만 검색/텍스트 필드에서 입력된 값을 가져오는 데 문제가 있다.쿼리 문자열에서 매개 변수 인수에 대한 오류가 표시됨.코드는 아래에 있다.

검색 상자

<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'를 읽을 수 없음

키업으로

그래서 검색창에 들어가는데 안 되는 아티스트 이름을 전달하려고?

환영해, 고마워

아래에서 시도하십시오.

<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랑도 같이 일해야겠어

다음 방법:

@keyup.enter="searchData(params)" 

이사Vue고유 이벤트가 아닌 이벤트.그렇게params이 경우 텍스트 필드의 값일 뿐이다.그것은 물건이 아니다.구조화 할 수 없다.paramsfunc 논쟁에서, 그리고 당신은 접근할 수 없다.id그것은 물건이 되지 않을 것이기 때문에 그것에서 벗어났다.

참조URL: https://stackoverflow.com/questions/60675616/axios-vuex-api-query-not-working-error-in-params-argument

반응형