vue以表单的形式传递数组
时间: 2024-02-03 19:05:00 浏览: 165
vue-form-component:一个可以动态生成表单项的form表单组件
5星 · 资源好评率100%
可以使用 `v-model` 指令结合 `input` 元素的 `name` 属性来实现以表单的形式传递数组。具体步骤如下:
1. 创建一个数组并将其绑定到 Vue 实例的数据属性中。
```
data() {
return {
items: ['item1', 'item2', 'item3']
}
}
```
2. 在模板中使用 `v-for` 指令渲染表单元素。
```
<form>
<div v-for="(item, index) in items" :key="index">
<input type="text" :name="'items[' + index + ']'" v-model="items[index]">
</div>
<button type="submit">提交</button>
</form>
```
3. 在后端接收表单数据时,可以通过表单元素的名称来获取数组数据。
```
// 假设使用 Express 框架
app.post('/submit', (req, res) => {
const items = req.body.items; // ['item1', 'item2', 'item3']
// 处理表单数据
});
```
这样就可以以表单的形式传递数组了。
阅读全文