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

Question

我正在使用带有 vue.js 的sails.js 1.0，并希望创建一个动态表单，其中包含基于用户偏好的动态输入量。所以用户应该能够添加另一个输入，输入数据并发送包含动态数据量的完整表单。

我的表单如下所示：

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

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

怎么可能实现这样的动态形式？

Answer 1

我发现了缺失的部分。 Sails.js 使用的是基于 vue.js 构建的 parasails。

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

该联系表主要包括

• 视图/页面中的 .ejs 页面（=呈现表单的 html 代码）
• assets/js/pages 中的 contact.page.js 客户端脚本
• api/controllers 中的服务器端控制器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: ''
    }
  ]
},

然后我将其绑定到 .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: ''
      });
    },

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