前端 - vue3 遍历form表单时，如何让填写的内容一样？

Question

vue3 遍历form表单时，如何让填写的内容一样？

const formState = reactive({

studentId: undefined,
coachId: undefined,
contractId: undefined,
startDate: '',
startTime: '',
endDate: '',
endTime: '',
memo: '',

});
const formList = ref([formState]);

添加form

const addForm = () => {

formList.value.push(formState);

};

求大佬们指导？

Answer 1

v-model 绑定了每个输入框的值到对应的 item.value,当任何一个输入框的值发生变化时，写个@change 事件触发定义sValues方法，该方法会将改变的值同步到所有其他输入框

 sValues(index) {
      const value = this.items[index].value;
      this.items.forEach((item) => {
        item.value = value;
      });
    },

这是我想到的最简单的

Answer 2

进行深拷贝，初始化后再push而不是直接push

Answer 3

使用JSON.parse(JSON.stringify())进行深拷贝即可

const addForm = () => {
formList.value.push(JSON.parse(JSON.stringify(formState)));
};