如何使用 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 by

创建动态表单

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

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

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

Answer 1

我找到了缺失的部分。 Sails.js 使用 parasails，它建立在 vue.js.

之上

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

该联系表主要包括

views/pages
contact.page.js client-side 中的脚本 assets/js/pages
api/controllers

deliver-contact-form-message.js

在client-side脚本中，可以设置初始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（或您的名字）中的 client-side 脚本中添加了一个方法，当用户单击 "add field" 按钮时会调用该方法。

  methods: {

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

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

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

How to create dynamic form in sails.js with vue.js?

javascript

sails.js

vue.js