Kann nicht Senden Axios-Post-Formular Nuxt.js (VueJS)

Ich bin Herumspielen mit meinem ersten jemals Formular in Vue. Ich habe meine app mit Nuxt.

Ich bin in der Lage, um Daten über eine axios-get-Anfrage aus meinem API, aber ich kann nicht scheinen, um post-Daten.

neue.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>

Beim Klick auf den submit-button, ich erhalte keine Fehler, aber ich kann bestätigen, wird kein Eintrag Hinzugefügt, um meine API-Datenbank.

Mein API ist auf einem anderen server läuft localhost:4000 und ich habe den proxy in nuxt.config.js

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

Habe ich experimentierte mit beiden <form @submit.prevent="addGin"> und <form v-on:submit.prevent="addGin"> aber dieses scheint nicht, einen Unterschied zu machen.

Was anderes könnte ich fehlen?

InformationsquelleAutor Simon Cooper | 2019-01-28



2 Replies
  1. 1
    1. Hinzufügen @nuxtjs/axios Modul in Module Teil nuxt.config
    2. Verwenden this.$axios statt importiert eine. Beweis: https://axios.nuxtjs.org/usage
    • Den link den du gepostet wird nicht angezeigt, wie Axios importiert wird, die Art der OP ist mit Axios Rechte scheint mir, vor allem, wenn Sie GET Daten. Scheint wie eine Art API-Fehler zu mir. Plus, ich würde denken, es wäre ein nicht definierter Fehler in der Konsole für die axios.
    • axios ist in importierten Modulen Teil nuxt config: i.imgur.com/tECRGR7.png, Nachdem es axios ist in Komponenten, Speicher, …
  2. 0

    OK also war wirklich in der Nähe. Die änderung meiner axios params zu title: this.title offenbar war der trick.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.