javascript - Vue js如何调用方法wen prop变化

Question

我正在将一个组件调用到模型弹出窗口中我想在每个不同的单击事件时在弹出窗口中加载动态数据

这是我在父组件的 html 中的代码

<a v-if="days.label == 1" href="#" @click="viewTimeLog(employee.id, days.date)">
                                        <span class="badge badge-success">
                                            <i class="fas fa-check-circle"></i>
                                        </span>
                                    </a>
<!-- Modal -->
    <div class="modal fade" id="view-emp-time-log" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div v-if="employee_id_number" class="modal-content">
            <employeeattentancelog :employeeIdNumber="employee_id_number" :attentanceDate="attentance_date"></employeeattentancelog>

        </div>
      </div>
    </div>
     <!-- / Modal -->

这是父组件中的脚本

<script>
import EmployeeAttentanceLog from "./EmployeeAttentanceLog.vue";
export default {
   components : {employeeattentancelog: EmployeeAttentanceLog},
   data() {
      employee_id_number : 0,
      attentance_date : '',
   },
methods : {
        viewTimeLog(empId, date) {
            this.employee_id_number = empId;
            this.attentance_date = date;
            $("#view-emp-time-log").modal("show");
        }
    }
}
</script>

这是我在 EmployeeAttendanceLog.Vue 中的脚本

<script>
export default {
    props : ['employeeIdNumber','attentanceDate'],
    data() {
        return {
            employee_id : this.employeeIdNumber,
            date : this.attentanceDate
        }
    }
</script>

我需要在 EmployeeAttentanceLog.vue 中调用一个方法，以便在employee_id 和日期更改时在弹出窗口中加载动态数据我该怎么做。我完全被困住了，任何人都可以帮助我吗？提前致谢

标签： javascripthtmlvuejs2popup

Answer 1

<script>
export default {
    props : ['employeeIdNumber','attentanceDate'],
    data() {
        return {
            employee_id : this.employeeIdNumber,
            date : this.attentanceDate
        }
    }
   watch: {
    employeeIdNumber(newVal, oldVal){
     this.employee_id = newVal
    }
  }
</script>

You can you vue JS's watch property to observe the change in any property or data