#javascript #vue.js #axios #vuetify.js
#javascript #vue.js #axios #vuetify.js
Вопрос:
Я не могу вызвать axios в Vuetify, потому что в URL-адресе есть обратные ссылки и ${}
. Я предполагаю, что я должен сделать это в формате JSON, поэтому я пытался, но это не работает. Можете ли вы мне это объяснить?
Ниже приведен мой код. Когда я нажимаю Search
кнопку, консоль выдает:
[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)
})
},
}
});
Ответ №1:
Литералы шаблона (строка с обратным тиком) поддерживают заполнители ( ${term}
часть), которые могут содержать выражения или, в данном случае, переменную. ${term}
выдает ошибку, поскольку в текущей области видимости нет переменной с именем «term».
Вам также не нужно использовать JSON.parse()
on apiUrl
, поскольку apiUrl
это не JSON. Вместо этого передайте apiUrl
непосредственно в axios.get()
:
const term = 'Moby Dick';
const apiUrl = `https://goodreads-server-express--dotdash.repl.co/search/${term}`;
axios.get(apiUrl).then(...)
new Vue({
el: '#app',
data: () => ({
books: [],
}),
methods: {
getBooks() {
const term = 'Moby Dick'
const apiUrl = `https://goodreads-server-express--dotdash.repl.co/search/${term}`
axios.get(apiUrl).then(resp => {
this.books = resp.data
})
}
}
})
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios@0.20.0/dist/axios.min.js"></script>
<div id="app">
<button @click="getBooks">Get books</button>
<pre>{{ books }}</pre>
</div>
Комментарии:
1. Спасибо за ваш ответ. Быстрый вопрос.. итак, если мне нужны входные данные для термина .. тогда я могу добавить search: ‘ ‘ в data() и vmodel <v-text-field> и изменить ваш постоянный термин на const term = this.search