Question

我正在尝试使用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>

Answer 1

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

import java.awt.Dimension;
import java.awt.Toolkit;

import javax.swing.JFrame;

public class MainFrame extends JFrame
{

    private static MainFrame instance;

    public MainFrame() 
    {
        Toolkit tk = Toolkit.getDefaultToolkit();
        Dimension screenD = tk.getScreenSize();
        int sHeight = screenD.height;
        int sWidth = screenD.width;
        setSize(sWidth / 2, sHeight / 2);

        setLocationRelativeTo(null);    
    }

    static 
    {
        instance = new MainFrame();
        System.out.println("Proba");
    }

    public static MainFrame getInstance() 
    {
        return instance;
    }

}

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

Vue JS和Axios不返回任何响应

1 个答案: