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

我正在将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>

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表单

，我不知道如何访问vue实例及其数据元素，以及如何在操作中使其动态化。显然，输入需要包含一个数组

---

如何实现这样一个动态表单？

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

使用sails generator

sails new test project

生成新的sails页面时，还会生成一个联系人表单，其中还包含可为此目的进行调整的必要代码

这种接触形式基本上包括

• 视图/页面中的.ejs页面（=呈现表单的html代码）
• assets/js/pages中的

  contact.page.js

  客户端脚本
• 服务器端控制器

  在api/controllers中传递联系人表单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>

---

由于双向绑定，一旦一个元素添加到数组

formData.myinputs

，就会创建另一个输入并添加到DOM。

我正在学习Parasails。你能解释一下parasails和vue js的区别吗？我有点困惑。e、 g.在Parasails中，数据是一个对象，而在vue中，数据是一个函数。@adis我不太理解您的问题，请单独提出一个问题，并提供更多信息。在上面的示例中，formData是vue.js中的数据（两者都是对象）。

  methods: {

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