Nuxt 与 Axios POST 到 Laravel 的 API答案

【问题标题】：Nuxt with Axios POST to Laravel's APINuxt 与 Axios POST 到 Laravel 的 API
【发布时间】：2020-11-03 02:28:48
【问题描述】：

伙计们，:)

我（还）不是 API 调用方面的专家，我在 Laravel 方面取得了成功。所以，需要你的帮助。

我一般可以使用 Laravel + Nuxt。所有连接的 POST 和 GET 在所有 CRUD 上都能正常工作。
我已经为这个现有的 APP 创建了一个新部门。
我可以调用 GET 并从 API 接收返回数据，没问题。
我可以使用 Postman 将 API 发布到此表/CRUD。
我不知道如何将我的表单发布到 API。

我知道这对你们中的一些人来说非常简单，但这次谷歌无法立即回答。使用 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 的开发工具中，我可以看到我输入的内容并作为产品提交。

对不起，如果这个问题是以前的问题，但我无法找到最后几天的解决方案并且用完了选项。

【问题讨论】：

你遇到了什么错误？
谢谢你，Kurt，问题解决了。我不能仅仅理解如何绑定数据，并且盲目地尝试这样做。有一个答案，对我来说工作正常。所以，我们可以结束这个问题。

标签： laravel axios nuxt.js

【解决方案1】：

您需要将“产品”元素设为“数据”元素并将数据元素绑定到表单。

//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.
    }

应该这样做。

【讨论】：