Nuxt with Axios POST to Laravel's API

Question

guys, :)

I'm no expert (yet) with API call's, am successful with Laravel on its own. So, need your help.

1. I am able to use Laravel + Nuxt in general. All connected POST and GET working fine on all CRUDs.
2. I've created a new department to this existing APP.
3. I am able to call GET and receive in return Data from API, no problem.
4. I am able to POST with Postman to API to this table/CRUD.
5. I'm unable to figure out how to POST with my form to API.

I know it's dead simple for some of you, but google this time couldn't answer straight away. Using VUE as an answer didn't help either. So, you're my only hope to be true.

Here is my code in Page file:

<template>
  <section class="max-content page">
    <TitleBox :title="'Dodaj Towar'" /> 
    <DodajTowar button-text="Submit" submit-form="products" /> 
  </section>
</template>
<script>
import TitleBox from '~/components/global/TitleBox.vue'
import DodajTowar from '~/components/magazyn/towar/DodajTowar.vue'
export default {
  components: {
    TitleBox,
    DodajTowar
  }
}
</script>

---

Here is the components file. They are connected and I can insert the data to DB only what I'll hardcode in this file:

<template>
  <section class="container">
    <div>
      <form @submit.prevent="products">
        <p>
          <label for="name" class="input-label">Nazwa</label>
          <input id="name" type="text" name="name" class="input">
        </p>
        <p>
          <label for="description" class="input-label">Opis</label>
          <input id="description" type="text" name="description" class="input">
        </p>
        <p>
          <label for="price" class="input-label">Cena</label>
          <input id="price" type="text" name="price" class="input">
        </p>
        <p>
          <button type="submit" value="Submit" class="button btn-primary">
            Zapisz
          </button>
        </p>
      </form>
    </div>
  </section>
</template>
<script>
export default {
  products() {
    return {
      name: '',
      description: '',
      price: ''
    }
  },

  methods: {
    products() {
      //   this.$axios.$post('api/warehouse/products', console.log(this.products))
      this.$axios({
        method: 'post',
        url: 'api/warehouse/products',
        data: {
          name: 'Fred',
          description: 'Flintstone',
          price: '111'
        }
      })
    }
  }
}
</script>

Can you please provide me with an example of how should I do it the right way? The form is working fine on its own as well, in the dev tools in VUE, I can see what I'm typing and submit as products.

Sorry if this question was before, but I was unable to find the solution for the last days and run out of options.

Answer 1

You need to make your 'products' elements 'data' elements and bind your data elements to your form.

//change from 'products'
data() {
    return {
      name: '',
      description: '',
      price: ''
    }
  },

Then your form should look like this:

<form @submit.prevent="products">
        <p>
          <label for="name" class="input-label">Nazwa</label>
          <input id="name" v-model="name" type="text" name="name" class="input">
        </p>
        <p>
          <label for="description" class="input-label">Opis</label>
          <input id="description" v-model="description" type="text" name="description" class="input">
        </p>
        <p>
          <label for="price" class="input-label">Cena</label>
          <input id="price" v-model="price" type="text" name="price" class="input">
        </p>
        <p>
          <button type="submit" value="Submit" class="button btn-primary">
            Zapisz
          </button>
        </p>
      </form>

The v-model attribute will bind the data elements to the inputs.

When you access the data elements in your method, you need to use 'this'.

products() {
      this.$axios({
        method: 'post',
        url: 'api/warehouse/products',
        data: {
          name: this.name,
          description: this.description,
          price: this.price
        }
      })
      //add a .then() and a .catch() here to deal with response.
    }

And that should do it.