javascript - 如何使用 vue.js 在 sails.js 中创建动态表单？

Question

我将 sails.js 1.0 与 vue.js 一起使用，并希望创建一个动态表单，其中包含基于用户偏好的动态输入量。因此，用户应该能够添加另一个输入、输入数据并发送包含动态数据量的完整表单。

我的表单如下所示:

<ajax-form action="addStuff" :syncing.sync="syncing" :cloud-error.sync="cloudError" @submitted="submittedForm()" :handle-parsing="handleParsingForm">
...
    <input class="form-control" id="input1" name="input1" type="text" :class="[formErrors.password ? 'is-invalid' : '']"
                      v-model.trim="formData.input1" placeholder="Input #1" autofocus>
...
    <ajax-button type="submit" :syncing="syncing" class="btn btn-dark">Save changes</ajax-button>

</ajax-form>

sails 中的操作 addStuff 如下所示:

module.exports = {
  friendlyName: 'Do some stuff',
  description: 'Do some stuff with the form data.',

  inputs: {

    input1: {
      description: 'The first input.',
      required: true
    }

  },


  fn: async function (inputs, exits) {
    // Do some stuff with the inputs
    return exits.success();

  }
};

我知道通常我可以通过以下方式使用 vue.js 创建一个动态表单

• 将Vue实例的数据设置为数组
• 创建双向绑定(bind)
• 在表单中实现一个 v-for 循环，然后为数据对象中的每个元素创建一个输入
• 每次用户想要添加另一个输入时，通过在数组中插入一个新元素来修改此数组。

但是有了 sails 和这个 ajax-form，我不知道如何访问 vue 实例和它的数据元素，以及如何使它在 Action 中也是动态的。显然，输入需要包含一个数组。

如何实现这样的动态表单？

Answer 1

我找出了缺失的部分。 Sails.js 正在使用 parasails它建立在 vue.js 之上。

当使用 sails 生成器 sails new test-project 生成新的 sails 页面时，还会生成一个联系表，其中还包含可以为此目的进行调整的必要代码。

该联系表主要包括

• View /页面中的 .ejs 页面(=呈现表单的 html 代码)
• assets/js/pages 中的 contact.page.js 客户端脚本
• api/controllers 中的服务器端 Controller deliver-contact-form-message.js

在客户端脚本中，可以设置初始的formData:

parasails.registerPage('maindivid', {
  //  ╦╔╗╔╦╔╦╗╦╔═╗╦    ╔═╗╔╦╗╔═╗╔╦╗╔═╗
  //  ║║║║║ ║ ║╠═╣║    ╚═╗ ║ ╠═╣ ║ ║╣
  //  ╩╝╚╝╩ ╩ ╩╩ ╩╩═╝  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
  data: {

    // Main syncing/loading state for this page.
    syncing: false,

    // Form data
    formData: { /* … */ },

    // For tracking client-side validation errors in our form.
    // > Has property set to `true` for each invalid property in `formData`.
    formErrors: { /* … */ },

    // Server error state for the form
    cloudError: '',

    // Success state when form has been submitted
    cloudSuccess: false,

  },
  ...

以及方法等

它遵循与普通 vue.js 相似的结构。

为了实现我想要做的事情，我将一个字段作为数组添加到 formData

 formData: {
  myinputs: [
    {
      key: '',
      value: ''
    }
  ]
},

然后我将其绑定(bind)到 .ejs 文件中:

<div class="form-row" v-for="(filter, index) in formData.mypinputs">
    <input class="form-control form-control-sm" type="text" :class="[formErrors.password ? 'is-invalid' : '']"
                          v-model.trim="formData.myinputs[index].key" placeholder="My field">
    <button type="button" class="btn btn-secondary btn-sm" @click="addFilterForm">add field</button>
</div>

最后在 contact.page.js(或您的名字)中向客户端脚本添加了一个方法，当用户单击“添加字段”按钮时会调用该方法。

  methods: {

    addFilterForm: function() {
      this.formData.myinputs.push({
        key: '',
        value: ''
      });
    },

由于双向绑定(bind)，只要将一个元素添加到数组 formData.myinputs 中，就会创建另一个输入并将其添加到 DOM 中。