Vue 3 Composition API 中如何正确添加表单项副本到数组

本文主要是介绍Vue 3 Composition API 中如何正确添加表单项副本到数组，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

        在 Vue 3 中，使用 Composition API 时，如果你尝试直接通过引用（如 formState）来填充 formList 数组，你会遇到一个问题：所有通过 addForm 方法添加的表单项实际上都是对 formState 的同一个引用。这意呀着，如果你修改了任何一个表单项，所有其他通过 formState 添加的表单项也会同时被修改，因为它们实际上都是指向同一个对象。

        为了解决这个问题，你需要在每次调用 addForm 方法时创建一个 formState 的新副本。这可以通过展开操作符（...）或者使用 Object.assign() 来实现。以下是两种方法的示例：

方法 1: 使用展开操作符

import { reactive, ref } from 'vue';  const formState = reactive({  studentId: undefined,  coachId: undefined,  contractId: undefined,  startDate: '',  startTime: '',  endDate: '',  endTime: '',  memo: '',  
});  const formList = ref([]);  const addForm = () => {  // 创建一个 formState 的新副本并添加到 formList 中  formList.value.push({ ...formState });  
};

方法 2: 使用 Object.assign()

注意，Object.assign() 会返回目标对象（即新对象），但需要注意的是，如果 formState 中的属性值是对象或数组等引用类型，则这些嵌套对象或数组不会被深拷贝，而只是浅拷贝。对于基本数据类型（如数字、字符串、布尔值等），这种方法是足够的。

const addForm = () => {  // 创建一个 formState 的新副本（浅拷贝）并添加到 formList 中  formList.value.push(Object.assign({}, formState));  
};

完整示例

        这里是一个完整的示例，展示了如何在 Vue 3 组件中使用上述方法：

<template>  <div>  <button @click="addForm">Add Form</button>  <div v-for="(form, index) in formList" :key="index">  <!-- 渲染表单内容 -->  <p>Student ID: {{ form.studentId }}</p>  <!-- 其他表单字段... -->  <button @click="removeForm(index)">Remove</button>  </div>  </div>  
</template>  <script>  
import { reactive, ref } from 'vue';  export default {  setup() {  const formState = reactive({  studentId: undefined,  // 其他字段...  });  const formList = ref([]);  const addForm = () => {  formList.value.push({ ...formState });  };  const removeForm = (index) => {  formList.value.splice(index, 1);  };  return { formList, addForm, removeForm };  },  
};  
</script>

在这个示例中，每次点击“Add Form”按钮时，都会通过 addForm 方法在 formList 中添加一个formState的新副本。这样，每个表单项都是独立的，修改一个表单项不会影响其他表单项。

这篇关于Vue 3 Composition API 中如何正确添加表单项副本到数组的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---