在vue.js中提交表单后，在同一页面上获取表单值

我有一个表单是在弹出窗口中打开的。因此，我在该表单中只有2个字段。提交表单后，我想在表单下方的同一个弹出窗口中显示表单值。我该如何做。有人能帮我吗

以下是我的vue页面：

<el-form :model="ScheduleInterviewForm" :rules="rules" ref="ScheduleInterviewForm" :inline="true">
            <el-form-item prop="schedule_datetime">
              <el-date-picker
                  v-model="ScheduleInterviewForm.schedule_datetime"
                  type="datetime"
                  size="small"
                  placeholder="Select Interview date">

              </el-date-picker>
            </el-form-item>

            <el-form-item prop="interview_type_id">
              <el-select size="small" v-model="ScheduleInterviewForm.interview_type_id" placeholder="Select Interview Type">
                <el-option
                  v-for="it in interview_types"
                  :label="it.type"
                  :value="it.id">
                </el-option>
              </el-select>
            </el-form-item>

            <ElButton
              type="success"
              size="small"
              @click="ScheduleInterview('ScheduleInterviewForm', c.hrc_id)">
              SCHEDULE INTERVIEW
            </ElButton>
    </el-form>

        <el-alert
          v-show="interviewScheduled"
          title="INTERVIEW SCHEDULED!"
          type="success">
        </el-alert>

         <el-form :model="ScheduleInterviewForm" :rules="rules" ref="ScheduleInterviewForm" :inline="true">
            <el-form-item prop="schedule_datetime">
            </el-form-item>
       </el-form>

export default {
props: ['c', 'interview_types'],
data() {
    return {
        ResumeDialog: false,
        ScheduleInterviewForm: {
            schedule_datetime: null,
            interview_type_id: null,
        },
        rules: {
          schedule_datetime: [
            { type: 'date', required: true, message: 'Select Schedule time', trigger: 'blur' },
            { validator: isDateFuture, trigger: 'blur' },
          ],
          interview_type_id: [
            { type: 'number', required: true, message: 'Select Interview type', trigger: 'blur' }
          ],
        },
        interviewScheduled: null,
    }
},
methods: {
  ScheduleInterview(form, hrcId) {
    var that = this;
    this.$refs[form].validate((valid) => {
      if (valid) {
        // AJAX: Create HrRequest
        axios.post('/ajax/schedule_interview', {
          interviewTypeId: this.ScheduleInterviewForm.interview_type_id,
          scheduleDatetime: this.ScheduleInterviewForm.schedule_datetime,
          hrcId
        })
        .then(function(res) {
             that.interviewScheduled = true;

          setTimeout(() => that.interviewScheduled = false, 3000);
          console.log(res);
          // that.candidates = res.data.candidates;
        })
        .catch(function(err) {
          console.log(err);
        });
      } else {
        return false;
      }
    });
  },
},
components: { ElButton, ElDialog, ElCard },

})

谁能帮我一下吗

---

提前感谢..

因为您希望表单中输入的值显示在af中

ter表单已成功提交

在数据属性中添加属性，如下所示：

data(){
            return{
                showFormValues = false;
            }
        }   

<div v-show="showFormValues">
    <p>date: {{ScheduleInterviewForm.schedule_datetime}}</p>
    <p>type: {{ScheduleInterviewForm.interview_type_id}}</p>
</div>  

在表格下方的段落标记中添加一个div，该div带有输入的值，并且仅当表格成功通过SUNBMIT usimg v-show时才显示该div，如下所示：

data(){
            return{
                showFormValues = false;
            }
        }   

<div v-show="showFormValues">
    <p>date: {{ScheduleInterviewForm.schedule_datetime}}</p>
    <p>type: {{ScheduleInterviewForm.interview_type_id}}</p>
</div>  

---

日期：{ScheduleInterviewForm.schedule_datetime}

类型：{{{ScheduleInterviewForm.Session_type_id}}

其中我必须在模板中或在template@bharathi在要显示它的模式中表单下方的模板内。顺便说一下，你在模板内部或外部询问……你不能在模板之外编写html代码。我还有一个疑问。提交表单后，我的表单值不会消失。它只会留在那里。我想删除表单值。提交后。如果用户输入其他详细信息，它只需编辑before值，而不是创建新值行..提交后，值出现..然后我关闭弹出窗口..刷新页面..值消失..我希望这些值只存在..请解释一下..我正在尝试这样做..从过去的6小时开始..它不起作用。。