在vue.js

Question

我有一个表单，表单在popup中打开..所以我只有2个字段在那个表单中..在我提交表单后我想在同一个弹出窗口（表单下方）显示表单值.how can 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

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

表格已成功提交

1. 在数据属性中添加一个属性，如下所示：

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

2. 在表单下方的段落标记中添加一个带有输入值的div，并且仅在表格成功地使用usimg v-show时显示div，如下所示：

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

3. 现在，在表单提交点击方法的成功部分然后块中设置showFormValues = true的值，如下所示：

   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;
         }
       });
     },