无法提交 Axios Post 表单 Nuxt.js (VueJS)

Posted 2023-02-22

【中文标题】无法提交 Axios Post 表单 Nuxt.js (VueJS)

【英文标题】：Can't Submit Axios Post form Nuxt.js (VueJS)

【发布时间】：2019-06-21 13:45:52

【问题描述】：

我正在玩我在 Vue 中的第一个表单。我已经用 Nuxt 创建了我的应用程序。

我可以通过我的 API 的 axios get 请求获取数据，但我似乎无法发布数据。

new.vue

<template>
    <section class="container">
    <div>
        <h1>Gins</h1>
        <form @submit.prevent="addGin">
        <h4>New Product</h4>
        <p>
            <label for="name" class="input-label">Title:</label>
            <input id="name" v-model="title" type="text" name="name" class="input">
        </p>
        <p>
            <button type="submit" value="Submit" class="button">Add Gin</button>
        </p>
        </form>
    </div>
    </section>
</template>
<script>
import axios from 'axios'
export default 
  data() 
    return 
      title: '',
      errors: []
    
  ,

  methods: 
    addGin() 
      axios.post('/apv/v1/gins', this.title)
        .then((Response) => )
        .catch((err) => 
          this.errors.push(err)
        )
    
  

</script>

单击提交按钮时，我没有收到任何错误，但我可以确认没有任何条目添加到我的 API 数据库中。

我的 API 在另一台服务器 localhost:4000 上运行，我已经在 nuxt.config.js 中设置了代理

 axios: 
    proxy: true
  ,
  proxy: 
    '/api/v1/': 'http://localhost:4000'
  ,

我对@9​​87654325@ 和<form v-on:submit.prevent="addGin"> 都进行了试验，但这似乎没有什么不同。

我还可能缺少什么？

【参考方案1】：

将@nuxtjs/axios模块添加到nuxt.config的模块部分 使用this.$axios 而不是导入的。证明：https://axios.nuxtjs.org/usage

【讨论】：

您发布的链接没有显示如何导入 Axios - OP 使用 Axios 的方式对我来说似乎是正确的，特别是如果他们可以GET 数据。对我来说似乎是某种 API 错误。另外，我认为 axios 的控制台中会有一个未定义的错误。

axios 被导入到 nuxt 配置的模块部分中：i.imgur.com/tECRGR7.png 之后 axios 在组件、商店等中可用...

【参考方案2】：

好的，所以真的很接近。将我的 axios 参数更改为 title: this.title，显然成功了。