Ошибка в v-on обработчике: «Ошибка типа: невозможно прочитать свойство 'term' of undefined" при получении из API itunes - PullRequest
0 голосов
/ 05 марта 2020

Я просто пытаюсь получить iTunes API при поиске песни в приложении vue. js.

Но я получаю эту ошибку:

[Vue warn]: ошибка в обработчике v-on: «Ошибка типа: невозможно прочитать свойство 'term' of undefined" AND

TypeError: Cannot read property 'term' of undefined
at VueComponent.search (App.vue?234e:38)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)
at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)

Так что, очевидно, мои результаты неопределенный? Но я не вижу, как я могу это исправить, кто-то может помочь? спасибо!

<template>
  <div id="app">
        <input v-model="term" type="search">
        <button @click="search">Search</button>
        <p/>

        <div v-for="result in results" :key="result.trackName" class="result">
            <img :src="result.artworkUrl100">
            <b>Track:</b> {{result.trackName}}<br/>
            <br clear="left">
        </div>

        <div v-if="noResults">
            Sorry, but no results were found. I blame Apple.
        </div>

        <div v-if="searching">
            <i>Searching...</i>
        </div>
    </div>
</template>

<script>


export default {
  name: 'App',
  components: {
  },
  data: () => ({
    term: "",
    results: [],
    noResults: false,
    searching: false
  }),
  methods: {
    search: () => {
      this.results = [];
      this.searching = true;
      fetch(
        `https://itunes.apple.com/search?term=${encodeURIComponent(this.term)}&limit=10&media=music`)
        .then(res => res.json())
        .then(res => {
          this.searching = false;
          this.results = res.results;
          this.noResults = this.results.length === 0;
        });
    }
  }
}
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...