如何在Sails.js 1.0中结合Vue.js创建动态表单？

嘿，这个动态增减输入框的需求挺常见的，结合你用的Sails.js 1.0和Vue.js，我给你整理一套完整的实现方案，分前端Vue组件和后端Sails接口两部分来说：

Vue前端组件实现 #

先把你的ajax-form组件补全，通过Vue的v-for循环渲染动态输入框，搭配添加/删除按钮实现交互：

<ajax-form 
  action="addStuff" 
  :syncing.sync="syncing" 
  :cloud-error.sync="cloudError" 
  @submitted="submittedForm()" 
  :handle-parsing="handleParsingForm"
>
  <!-- 动态输入框列表 -->
  <div v-for="(item, index) in items" :key="index" class="input-group mb-3">
    <input 
      class="form-control" 
      v-model="item.value" 
      placeholder="输入内容"
    >
    <button 
      class="btn btn-danger" 
      type="button" 
      @click="removeItem(index)"
      :disabled="items.length === 1"
    >
      删除
    </button>
  </div>

  <!-- 添加新输入框按钮 -->
  <button class="btn btn-primary" type="button" @click="addItem">
    添加输入框
  </button>

  <!-- 表单提交按钮 -->
  <button type="submit" class="btn btn-success mt-3" :disabled="syncing">
    {{ syncing ? '提交中...' : '提交表单' }}
  </button>
</ajax-form>

然后在Vue组件的脚本部分，实现数据管理和交互逻辑：

export default {
  data() {
    return {
      syncing: false,
      cloudError: '',
      // 存储动态输入框的数据，初始保留至少一个输入框
      items: [{ value: '' }]
    }
  },
  methods: {
    // 添加新的空输入框
    addItem() {
      this.items.push({ value: '' });
    },
    // 删除指定索引的输入框，确保至少保留一个
    removeItem(index) {
      if (this.items.length > 1) {
        this.items.splice(index, 1);
      }
    },
    // 处理表单解析，把动态数据整理成后端能接收的格式
    handleParsingForm(formData) {
      // 过滤掉空输入，把数据整理成数组传给后端
      return {
        items: this.items.map(item => item.value.trim()).filter(val => val)
      };
    },
    // 表单提交成功后的回调
    submittedForm() {
      // 重置表单状态
      this.items = [{ value: '' }];
      this.cloudError = '';
      alert('表单提交成功！');
    }
  }
}

Sails.js 后端接口处理 #

在Sails的控制器里实现addStuff动作，接收前端传来的动态数据并处理：

// api/controllers/StuffController.js
module.exports = {
  addStuff: async function(req, res) {
    try {
      // 获取前端提交的动态数据数组
      const items = req.body.items;

      // 基础数据校验
      if (!Array.isArray(items) || items.length === 0) {
        return res.badRequest('请至少填写一个有效内容');
      }

      // 批量创建数据（假设你有对应的Stuff模型）
      const createdItems = await Stuff.createEach(
        items.map(content => ({ content }))
      ).fetch();

      // 返回成功响应
      return res.ok({
        message: '数据提交成功',
        data: createdItems
      });
    } catch (err) {
      // 捕获并返回错误信息
      return res.serverError(`提交失败：${err.message}`);
    }
  }
};

额外注意点 #

• 如果你启用了Sails的CSRF保护，要确保ajax-form组件带上CSRF Token，Vue里可以通过window.SAILS_LOCALS._csrf获取并传入组件；
• 可以给输入框添加更细致的验证（比如用VeeValidate），确保输入内容符合业务要求；
• 对应的Stuff模型需要定义匹配的字段，比如api/models/Stuff.js里添加：

  module.exports = {
    attributes: {
      content: { type: 'string', required: true }
    }
  };
  

内容的提问来源于stack exchange，提问作者sceee