Блог

Я не могу вызвать 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)
      })
    },
  }    
});

  

Литералы шаблона (строка с обратным тиком) поддерживают заполнители ( ${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>