选择单个行时未触发 Vuetify 数据表 @input 事件答案

【问题标题】：Vuetify data-table @input event not fired when individual row is selected选择单个行时未触发 Vuetify 数据表 @input 事件
【发布时间】：2019-05-18 18:06:33
【问题描述】：

我想使用 vuetify 的 data-table 组件创建自己的表格组件。

这是我所做工作的沙盒：https://codesandbox.io/s/my2mvroxlj

基本上SampleTable 是 Vuetify 数据表的包装器。在该表格组件中，我想让项目可选择。我能够使用 select-all 属性渲染复选框。我正在使用items 插槽来呈现每一行的复选框。

我面临的问题是，当用户选择一个复选框时，input 事件没有被触发（有关消息，请参见控制台）但是，如果标题中的复选框被选中/取消选中，input 事件将被正确触发。

我不知道为什么会这样。请帮助在我的代码中查找问题。

【问题讨论】：

标签： vuejs2 vuetify.js

【解决方案1】：

问题在于，当包装 vuetify 组件并使用作用域插槽时，分别发送 item 和 selected 不起作用。因此，需要将整个props 发送到父组件。

在更新后的代码中，我使用了slotProps 属性将props 从子级发送到父级。这样，当父组件中的复选框状态发生变化时，它会传播到子组件并触发输入事件。

下面是正常工作的代码：https://codesandbox.io/s/vue-template-5okdy

【讨论】：