Vue.js 同一个表单用于添加和编辑

在本文中，我们将介绍如何使用Vue.js实现同一个表单用于添加和编辑数据的功能。通常情况下，添加和编辑操作的表单结构相似，并且都需要对表单进行验证和提交数据。通过复用同一个表单组件，我们可以减少代码重复，并提高开发效率。

创建表单组件

首先，我们需要创建一个表单组件。可以使用Vue.js提供的Vue.component方法来创建一个全局的表单组件，然后在需要的地方引用它。

Vue.component('form-component', {
  data() {
    return {
      formData: {
        name: '',
        age: '',
        email: ''
      }
    };
  },
  methods: {
    submitForm() {
      // 表单提交逻辑
    },
    validateForm() {
      // 表单验证逻辑
    }
  },
  template: `
    <form @submit.prevent="submitForm">
      <div>
        <label for="name">姓名</label>
        <input type="text" id="name" v-model="formData.name">
      </div>
      <div>
        <label for="age">年龄</label>
        <input type="number" id="age" v-model="formData.age">
      </div>
      <div>
        <label for="email">邮箱</label>
        <input type="email" id="email" v-model="formData.email">
      </div>
      <button type="submit">提交</button>
    </form>
  `
});

在上面的代码中，我们定义了一个名为form-component的表单组件，通过data()方法设置了表单的初始化数据。表单的提交逻辑和验证逻辑分别在submitForm()和validateForm()方法中实现。模板中使用了v-model指令来进行表单数据的双向绑定。

添加操作

当我们需要进行添加操作时，只需在相应的页面引用form-component组件，并在提交表单时调用添加数据的接口。

<template>
  <div>
    <!-- 此处为添加页面其他内容 -->
    <form-component></form-component>
  </div>
</template>

<script>
export default {
  // 添加页面的其他逻辑
}
</script>

在上述示例中，我们将form-component组件放在添加页面的适当位置。当用户在表单中填写完数据后，点击提交按钮时，会触发submitForm()方法，我们可以在该方法中调用添加数据的接口，并进行相应的处理。

编辑操作

对于编辑操作，我们需要将要编辑的数据传递给表单组件，在表单中进行展示。我们可以通过Vue.js的路由参数或者props来传递数据。

<template>
  <div>
    <!-- 此处为编辑页面其他内容 -->
    <form-component :data="editData"></form-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      editData: {} // 编辑数据的初始值
    }
  },
  mounted() {
    // 获取要编辑的数据，并将数据赋值给editData
  }
}
</script>