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

Question

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

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

新的.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'
  },

我已经尝试过<form @submit.prevent="addGin">和<form v-on:submit.prevent="addGin">但这似乎没有什么区别。

我还可能缺少什么？

Answer 1

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

Answer 2

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