@160over90/vue-form-fetch 中文文档教程

Question

FormFetch

Features

允许您使用 HTTP 方法 GET 和 POST 发送或获取从任意数量的表单字段收集的数据。

如果你没有 yarn，你可以在这里下载它。

Instructions for global registration

yarn add @160over90/vue-form-fetch

包含在 main.js（应用入口点）

import FormFetch from '@160over90/vue-form-fetch';

Vue.use(FormFetch);

Instructions for editing this package

yarn install

Compiles and hot-reloads for development

yarn run serve

Attributes

方法 method 属性不包括“GET”或“POST”HTTP 方法。

行动 action 属性不包括您的 API 端点或 PHP 中间件的路径。

示例

<FormFetch
  method="POST"
  action="/submit-form.php"
>
  <template slot-scope="{ state, response }">
    <div>
      <label>
        <div>First Name</div>
        <input name="firstName">
      </label>
    </div>
    <div>
      <label>
        <div>Last Name</div>
        <input name="lastName">
      </label>
      </div>
      <button v-text="'Submit'"/>
      <p v-if="state === 'pending'>
        Submitting your request...
      </p>
      <p v-else-if="state === 'rejected'">
        Sorry, that didn't work!
      </p>
      <p v-else-if="state === 'fulfilled'">
        {{ response.ok
          ? "You're good to go!"
          : "Sorry, that didn't work!"
        }}
      </p>
  </template>
</FormFetch>

Props

init（对象，默认值：null） 允许您传递配置对象。

示例

<FormFetch
  method="POST"
  action="/submit-form.php"
  :init="{
    mode: 'cors',
    cache: 'no-cache',
  }"
>
...

请求属性请参考：https://developer.mozilla.org/en-US/docs/Web/API/Request。

License

麻省理工学院