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

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

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

Answer 2

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

Answer 3

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

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

这是我想到的最简单的