Vue js和axios没有返回任何响应答案

【问题标题】：Vue js and axios not returning any responseVue js和axios没有返回任何响应
【发布时间】：2019-10-24 14:48:35
【问题描述】：

我正在尝试使用 Vue.JS 和 axios 访问 OMDB api。但是，当我在 findId 方法中将查询从输入字段传递到 axios 时，我没有得到任何控制台记录，没有错误也没有 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>

【问题讨论】：

您能否检查开发工具中的网络选项卡以查看请求是否正在发送以及返回的内容？
按回车后页面不知何故刷新，响应没有时间加载
哦，我想我看到了问题，让我回答一下。
您需要使用@keyup.prevent.enter="findId(query)"防止默认提交操作

标签： vue.js axios

【解决方案1】：

您的表单上有一个提交按钮，您正在监听用户是否按下回车键。当您在 html 表单的最后一个字段中按 Enter 键时，它会提交表单。因此，将您的输入字段更改为以下内容。

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

在事件侦听器末尾添加 .prevent 将阻止默认行为，即提交表单。

【讨论】：