Question

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

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

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        if let count = restaurant?.menuItems.count {
            return count
        } else {
            return 0
        }
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = masterTableView.dequeueReusableCell(withIdentifier: "menuCell", for: indexPath) as! MenuItemCell
        cell.selectionStyle = UITableViewCell.SelectionStyle.none

        let currentItem = restaurant?.menuItems[indexPath.row]
        cell.item = currentItem

        return cell
    }

这是父组件中的脚本

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

这是我在EmployeeAttendanceLog.Vue中的脚本

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

当employee_id和日期更改时，我需要调用EmployeeAttentanceLog.vue中的方法以在弹出窗口中加载动态数据我怎样才能做到这一点。我完全陷入困境，任何人都可以帮助我吗？预先感谢

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>

Vue JS如何调用方法Wen prop更改

2 个答案: