vue from表单 新增 or 编辑

Vue可以使用v-model指令来实现表单数据的双向绑定，从而实现表单的新增和编辑操作。

在新增操作中，我们需要创建一个空数据对象，然后将表单数据绑定到该对象上，最后将该对象提交到后端进行保存。

在编辑操作中，我们需要获取待编辑的数据对象，并将其属性值绑定到表单上，然后进行修改操作。修改完成后，同样需要将修改后的数据对象提交到后端进行保存。

示例代码：

<template>
<div>
<form>
<label>姓名：</label>
<input type="text" v-model="formData.name">
<label>年龄：</label>
<input type="text" v-model="formData.age">
<button @click.prevent="submitForm">保存</button>
</form>
</div>
</template>

<script>
export default {
data() {
return {
formData: {
name: '',
age: ''
}
}
},
methods: {
submitForm() {
// 提交表单数据到后端进行保存
}
}
}
</script>

在编辑操作中，需要传递待编辑的数据对象作为参数来初始化表单数据：

<template>
<div>
<form>
<label>姓名：</label>
<input type="text" v-model="formData.name">
<label>年龄：</label>
<input type="text" v-model="formData.age">
<button @click.prevent="submitForm">保存</button>
</form>
</div>
</template>

<script>
export default {
data() {
return {
formData: {
name: '',
age: ''
}
}
},
methods: {
loadData(id) {
// 获取待编辑的数据对象
const data = getDataById(id);
// 初始化表单数据
this.formData.name = data.name;
this.formData.age = data.age;
},
submitForm() {
// 提交表单数据到后端进行保存
}
}
}
</script>