Nuxt с Ax ios POST для Laravel API - PullRequest
Новая
       79

Nuxt с Ax ios POST для Laravel API

0 голосов
/ 13 июля 2020

ребята, :)

Я (пока) не эксперт по вызовам API, добился успеха с Laravel сам по себе. Итак, нужна ваша помощь.

  1. Я могу использовать Laravel + Nuxt в целом. Все подключенные POST и GET работают нормально на всех CRUD.
  2. Я создал новый отдел для этого существующего приложения.
  3. Я могу вызвать GET и получить взамен данные из API, нет проблема.
  4. Я могу отправить POST с помощью Postman в API в эту таблицу / CRUD.
  5. Я не могу понять, как выполнить POST с моей формой в API.

Я знаю, что для некоторых из вас это очень просто, но на этот раз Google не смог ответить сразу. Использование VUE в качестве ответа тоже не помогло. Итак, ты моя единственная надежда быть правдой.

Вот мой код в файле страницы: 

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

Вот файл компонентов. Они подключены, и я могу вставить данные в БД только то, что я жестко закодирую в этом файле: 

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

Не могли бы вы дать мне пример того, как мне сделать это правильно? Форма также работает нормально сама по себе, в инструментах разработчика в VUE я вижу, что набираю, и отправляю как продукты.

Извините, если этот вопрос был ранее, но я не смог чтобы найти решение на последние дни и исчерпать возможности.

1 Ответ

0 голосов
/ 14 июля 2020

Вам необходимо сделать элементы данных «элементы продуктов» и привязать элементы данных к вашей форме. 

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

Тогда ваша форма должна выглядеть так: 

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

Атрибут v-model привяжет элементы данных к входам.

Когда вы получаете доступ к элементам данных в вашем методе, вам нужно использовать '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.
    }

И это должен это сделать.

...