vue.jsでフォームを送信した後、同じページにフォームの値を取得

Question

私はフォームがポップアップで開いています。そのため、フォームには2つのフィールドしかありません。 （フォームの下）同じポップアップ上のフォームの値を表示するために.how私はいずれかが私を助けるthat..canないことができます。..

ここに私の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 }, 

}

ここは私のjsページです：

const app = new Vue({ 
el: '#app', 
data:() => ({ 
    hr_request: window.data.hr_request, 
    candidates: window.data.candidates, 
    interview_types: window.data.interview_types, 

}), 
methods: { 
    ScheduleInterview(requestCandidateId, interviewTime) { 
     console.log(requestCandidateId, interviewTime); 
    }, 
}, 
components: { 
    Candidate, 
    Schedule, 
} 

}）;

いずれかが私を助けることができるしてください..事前に

おかげ..

Answer 1

フォームが正常に

を提出しているterを形でinputed値はAF

を表示したいので、

1. データプロパティのプロパティを次のように追加します。

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

2. フォーム下の段落タグでinputed値を持つdiv要素を追加し、フォームがsucessfully以下のようにv-showをusimg sunbmittedされている場合にのみDIVを示しています。

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

3. を今すぐ成功一部で、その後

   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; 
         //show the input form values on succesful form submission 
         that.showFormValues = true; 
         setTimeout(() => that.interviewScheduled = false, 3000); 
         console.log(res); 
         // that.candidates = res.data.candidates; 
        }) 
        .catch(function(err) { 
         console.log(err); 
        }); 
        } else { 
        return false; 
        } 
       }); 
       }, 
   

：フォームのsubmittionクリック方式のブロックはこのよう showFormValues = trueの値を設定します