Question

伙计们，：）

我还不是API调用的专家，Laravel本身就很成功。因此，需要您的帮助。

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

对于某些人来说，这很简单，但Google这次无法立即回答。使用VUE作为答案也无济于事。所以，你是我唯一的希望。

这是我在Page文件中的代码：

<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的开发工具中，我可以看到自己输入的内容并作为产品提交。

很抱歉，如果以前没有这个问题，但是我找不到最后几天的解决方案，并且用完了所有选项。

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

那应该做到的。

Nuxt与Axios POST到Laravel的API

1 个答案: