vueコンポーネントで、フォームに入力された最後の値を変更します

実装機能：追加および変更するためのボタンがあります。クリックして「vue」などのデータを追加および保存します。「変更」ボタンをクリックすると、この「vue」の値を変更できます。

<template>
  <div>
    <br />
    <el-button type="warning" plain @click="addClick">新增2</el-button>
    <el-button type="warning" plain @click="changeClick">修改</el-button>
    <!-- 弹出新增 -->
    <el-dialog
      title="新增设备信息"
      :visible.sync="dialogFormVisible"
      width="30%"
      @close="closexz"
    >
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item label="设备编号" prop="xzdate">
          <el-input v-model.trim="form.xzdate" placeholder="请输入设备编号">
          </el-input>
        </el-form-item>

        <el-form-item label="设备描述" prop="xzsec">
          <el-input
            v-model.trim="form.xzsec"
            type="textarea"
            :rows="3"
            placeholder="请输入设备描述"
          ></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary" @click="submitForm('form')"> 确定</el-button>
      <el-button @click="cancelxz">取 消</el-button>
    </el-dialog>

    <!-- 弹出修改 -->
    <el-dialog
      title="修改设备信息"
      :visible.sync="dialogFormChange"
      width="30%"
      @close="closexz"
    >
      <el-form ref="formxg" :model="formxg" :rules="rules">
        <el-form-item label="设备编号" prop="xzdate">
          <el-input v-model.trim="formxg.xzdate" placeholder="请输入设备编号">
          </el-input>
        </el-form-item>

        <el-form-item label="设备描述" prop="xzsec">
          <el-input
            v-model.trim="formxg.xzsec"
            type="textarea"
            :rows="3"
            placeholder="请输入设备描述"
          ></el-input>
        </el-form-item>
      </el-form>

      <el-button type="primary" @click="changeForm('formxg')"> 确定</el-button>
      <el-button @click="cancelxz">取 消</el-button>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //弹出新增表单
      form: {
        xzdate: "1",
        xzsec: "2",
      },
      //修改 表单
      formxg: {
        xgdate: "",
        xgsec: "",
      },
      data: {},
      rules: {
        xzdate: [
          {
            required: true, //是否必填
            message: "不能为空", //规则
            trigger: "blur", //何事件触发
          },
          {
            min: 1,
            max: 10,
            message: "长度在1到10个字符",
          },
        ],
        xzsec: [
          {
            required: true, //是否必填
            message: "不能为空", //规则
            trigger: "blur", //何事件触发
          },
        ],
        xgdate: [
          {
            required: true, //是否必填
            message: "不能为空", //规则
            trigger: "blur", //何事件触发
          },
          {
            min: 1,
            max: 10,
            message: "长度在1到10个字符",
          },
        ],
        xgsec: [
          {
            required: true, //是否必填
            message: "不能为空", //规则
            trigger: "blur", //何事件触发
          },
        ],
      },
      //设置的弹出新增窗口
      dialogFormVisible: false,
      dialogFormChange: false,
    };
  },
  methods: {
    //1.新增一个 修改按钮
    //2.点击新增弹出框 的确定按钮 把 新增表单里 的值 保存 到 data中

    //3.关闭新增 清空数据
    // 点击修改按钮
    // 1. 取值
    // 2. 赋值
    // 3. 显示
    //4.把数据 赋值到 修改的表单里
    //5. 修改数据的值 并确定
    // 新增
    addClick() {
      //复制两份form
      // this.formxg = this.form; 如果关闭表单则保留上次输入的数据
      this.form = {};
      this.dialogFormVisible = true;
    },
    //修改
    changeClick() {
      // 在点击确定之后 把data里的值赋值到修改的表单里
       this.formxg = Object.assign({}, this.data); 
      console.log(this.formxg, "this.formxg");
      this.dialogFormChange = true;
    },
    //新增  确定按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.data = Object.assign({}, this.form);
          alert("新增成功!");
          this.dialogFormVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //修改  确定按钮
    changeForm() {
      this.$refs["formxg"].validate((valid) => {
        if (valid) {
          this.formxg = Object.assign({}, this.data);
          console.log(this.form, "this.form");
          this.dialogFormChange = false;
          alert("修改成功!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //取消
    cancelxz() {
      this.dialogFormVisible = false;
      this.$refs.form.resetFields(); //移除校验结果并重置字段值
      this.form = {};
    },
    //Dialog 弹窗关闭的回调
    closexz() {
      this.$refs.form.resetFields(); //移除校验结果并重置字段值
      console.log(this.form, "this.form");
      console.log(this.data, "this.data");
    },

    // submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       this.data = Object.assign({},this.form);
    //       this.dialogFormVisible = false;
    //       alert('submit!');

    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
  },
};
</script>
<style>
</style>