Vue JS и Axios не возвращают никакого ответа

Question

Я пытаюсь получить доступ к API OMDB, используя Vue.JS и axios. Однако, когда я передаю запрос из поля ввода в axios в методе findId, я не получаю ничего зарегистрированного в консоли, ни ошибки, ни response.data. Почему так себя ведет?

<template>
    <div id="search" class="jumbotron">


    <div class='page-header'>
      <div class='btn-toolbar pull-right'>
        <div class='btn-group'>
          <button type='button' class='btn btn-primary'>FAQ</button>
        </div>
      </div>
    </div>

    <p class="text-center justify-content-center">Search for TV Show
    </p>


    <form class="form-inline justify-content-center">


                <input class="form-control mr-sm-2" type="text" placeholder="Tv shows..." name="search" @keyup.enter="findId(query)" v-model="query" required>


        <button class="btn btn-outline-success  my-2 my-sm-0" type="submit">Search</button>
    </form>


    <br>

    <p class="text-center"><a id="show-data" class="btn btn-primary btn-lg"> See the table </a></p>

</div>

</template>

<script>
    import axios from 'axios';

    export default {
        name: "Search.vue",
        data() {
            return {
              query: '',
            };
          },
        methods: {
            findId: function(query) {
                axios.get('http://www.omdbapi.com/?s='+ query + "&type=series&apikey=XXXX").then((response) => {
                    // eslint-disable-next-line no-console
                console.log(response.data);
              }).catch((err) => {
                    // eslint-disable-next-line no-console
                console.log(err);
              });
            }
        }
    }
</script>

Answer 1

Ваша форма имеет кнопку отправки, и вы слушаете, как пользователь нажимает клавишу ввода. Когда вы нажимаете ввод в последнем поле HTML-формы, она отправляет форму. Поэтому измените поле ввода на следующее.

<input class="form-control mr-sm-2" type="text" placeholder="Tv shows..." name="search" @keyup.enter.prevent="findId(query)" v-model="query" required>

Добавление .prevent в конце прослушивателя событий предотвратит поведение по умолчанию, а именно отправку формы.