Не удается отправить сообщение Аксиоса Nuxt.js (VueJS) - PullRequest
Новая
       10

Не удается отправить сообщение Аксиоса Nuxt.js (VueJS)

0 голосов
/ 28 января 2019

Я играю с моей первой формой в Vue.Я создал свое приложение с помощью Nuxt.

Я могу получить данные с помощью специального запроса get из моего API, но не могу опубликовать данные.

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'
  },

Я экспериментировал как с <form @submit.prevent="addGin">, так и с <form v-on:submit.prevent="addGin">но это, кажется, не имеет значения.

Что еще я мог бы упустить?

Ответы [ 2 ]

0 голосов
/ 28 января 2019

ОК, так что было очень близко.Изменение параметров моего axios на title: this.title, по-видимому, сработало.

0 голосов
/ 28 января 2019
  1. Добавление модуля @nuxtjs/axios в составную часть модуля nuxt.config
  2. Использование this.$axios вместо импортированного.Пруф: https://axios.nuxtjs.org/usage
...