Vue JS, как вызвать метод WEN изменить реквизит

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 -->

thisэто скрипт в родительском компоненте

<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 и дата изменения Как я могу это сделать.Я полностью застрял, кто-нибудь может мне помочь?заранее спасибо

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

Answer 2

вы не можете смотреть оба реквизита в одной функции, вам придется добавить один наблюдатель для каждой переменной, для которой вы хотите инициировать действие при изменении.Вы можете создать один обработчик (одну функцию) для выполнения внутри каждого наблюдателя, например:

<script>
export default {
  props : ['employeeIdNumber','attentanceDate'],
  data() {
    return {
      employee_id : this.employeeIdNumber,
      date : this.attentanceDate
    }
  }
  methods: {}
  watch: {
    employeeIdNumber(newVal, oldVal){
      this.handler('param')
    },
    attenanceDate(newVal, oldVal){
      this.handler('param')
    }
  },
  methods: {
    handler(params) {
      // do something here
    }
  }
</script>