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

帆中的动作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 和 this ajax-form，我不知道如何访问 vue 实例及其数据元素，以及如何使其在操作中也是动态的。显然输入需要包含一个数组。

如何才能实现如此动态的形式呢？

Answer 1

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

\n\n

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

\n\n

该联系表格基本上包括

\n\n

\n
• 视图/页面中的 .ejs 页面（=呈现表单的 html 代码）
\n
• contact.page.js客户端脚本位于assets/js/ pages
\n
• deliver-contact-form-message.jsapi/controllers 中的服务器端控制器
\n

\n\n

在客户端脚本中，formData可以设置初始值：

\n\n

parasails.registerPage(\'maindivid\', {\n  //  \xe2\x95\xa6\xe2\x95\x94\xe2\x95\x97\xe2\x95\x94\xe2\x95\xa6\xe2\x95\x94\xe2\x95\xa6\xe2\x95\x97\xe2\x95\xa6\xe2\x95\x94\xe2\x95\x90\xe2\x95\x97\xe2\x95\xa6    \xe2\x95\x94\xe2\x95\x90\xe2\x95\x97\xe2\x95\x94\xe2\x95\xa6\xe2\x95\x97\xe2\x95\x94\xe2\x95\x90\xe2\x95\x97\xe2\x95\x94\xe2\x95\xa6\xe2\x95\x97\xe2\x95\x94\xe2\x95\x90\xe2\x95\x97\n  //  \xe2\x95\x91\xe2\x95\x91\xe2\x95\x91\xe2\x95\x91\xe2\x95\x91 \xe2\x95\x91 \xe2\x95\x91\xe2\x95\xa0\xe2\x95\x90\xe2\x95\xa3\xe2\x95\x91    \xe2\x95\x9a\xe2\x95\x90\xe2\x95\x97 \xe2\x95\x91 \xe2\x95\xa0\xe2\x95\x90\xe2\x95\xa3 \xe2\x95\x91 \xe2\x95\x91\xe2\x95\xa3\n  //  \xe2\x95\xa9\xe2\x95\x9d\xe2\x95\x9a\xe2\x95\x9d\xe2\x95\xa9 \xe2\x95\xa9 \xe2\x95\xa9\xe2\x95\xa9 \xe2\x95\xa9\xe2\x95\xa9\xe2\x95\x90\xe2\x95\x9d  \xe2\x95\x9a\xe2\x95\x90\xe2\x95\x9d \xe2\x95\xa9 \xe2\x95\xa9 \xe2\x95\xa9 \xe2\x95\xa9 \xe2\x95\x9a\xe2\x95\x90\xe2\x95\x9d\n  data: {\n\n    // Main syncing/loading state for this page.\n    syncing: false,\n\n    // Form data\n    formData: { /* \xe2\x80\xa6 */ },\n\n    // For tracking client-side validation errors in our form.\n    // > Has property set to `true` for each invalid property in `formData`.\n    formErrors: { /* \xe2\x80\xa6 */ },\n\n    // Server error state for the form\n    cloudError: \'\',\n\n    // Success state when form has been submitted\n    cloudSuccess: false,\n\n  },\n  ...\n

\n\n

以及方法等。

\n\n

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

\n\n

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

\n\n

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

\n\n

然后我将其绑定到 .ejs 文件中：

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n