Vue的form綁定數組可用于處理表單的多項選擇或動態添加表單項等場景。以下是示例代碼:
<template> <form v-on:submit.prevent> <div v-for="(item, index) in items" :key="index"> <label>{{item.label}}</label> <input v-model="item.value"> <button type="button" v-on:click="removeItem(index)">刪除</button> </div> <button type="button" v-on:click="addItem">添加</button> <button type="submit">提交</button> </form> </template> <script> export default { data() { return { items: [ {label: '選項1', value: ''}, {label: '選項2', value: ''}, ], } }, methods: { addItem() { this.items.push({label: `選項${this.items.length + 1}`, value: ''}) }, removeItem(index) { this.items.splice(index, 1) }, } } </script>
在該示例中,form元素使用v-on:submit.prevent屬性防止默認提交事件的觸發。通過v-for指令遍歷items數組,渲染動態表單項。input元素使用v-model指令雙向綁定表單項值與data中的items數組。添加按鈕綁定addItem方法,用于在數組尾部新增表單項,刪除按鈕綁定removeItem方法,用于刪除目標表單項。提交按鈕使用默認的form提交事件,可在methods中定義submit方法處理表單提交。