I am having trouble with calling axios in Vuetify due to backticks and ${} within the URL. I believe I need to convert it into JSON format, but my attempts have been unsuccessful. Could you please provide an explanation?
Here is the code snippet. Whenever I click on the Search button, the console displays the following error:
[Vue warn]: Error in v-on handler: 'ReferenceError: term is not defined'
<div id="app">
<v-app >
<v-form >
<v-row class="app">
<v-col class="text-center" cols="12" sm="4">
<v-text-field
placeholder="Find Book"
></v-text-field>
<div class="my-2">
<v-btn v-on:click="getBooks" large color="primary">Search</v-btn>
</div>
</v-col>
</v-row>
</v-form>
</v-app>
<!-- You may use this container for your listing -->
<div>
</div>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
components: {},
data(){
return{
books: []
}
},
methods: {
getBooks: function() {
const apiUrl = `https://goodreads-server-express--dotdash.repl.co/search/${term}`;
const obj = JSON.parse(apiUrl)
axios.get("obj")
.then(function (resp) {
this.books = resp.data
console.log(this.books)
})
},
}
});