Я просто пытаюсь получить 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>