Vue.js 和 Vuetify 插槽范围

Question

我真的只是不确定 slot-scopes 是如何工作的。想知道是否有人可以帮助我解决这个（看似）非常简单的问题。

<v-data-table>
    <template slot="items" slot-scope="props">
        <tr @click="props.expanded = !props.expanded">

我要做的是手动更新“道具”以根据外部事件扩展此行。问题是，我无法弄清楚如何在上述上下文之外访问它。 props.expanded = !props.expanded 工作正常。

有什么想法吗？

Answer 1

组件中似乎没有内置方法。由于数据表创建了它自己的扩展对象并且不使用传入的道具。

您可以使用 ref。 Vue page on child component refs.

以下代码会将数据表上的 ref 设置为 accesshere。

<v-data-table ref="accesshere" :headers="headers" :items="dataTable" 
:search="search" item-key="id">

现在您可以使用 this.$refs.accesshere.expanded['nameofkey'] = false 访问该对象（将其设置为 false 将关闭展开的表格行）

这是一个codepen 展示它的实际应用。

展开的对象存在问题，直到您第一次展开一行时才会填充它。因此，如果您执行以下操作。它不会看到这些更改（除非您强制更新组件），因此不会立即展开该行。

 methods: {
   itemShow () {
     this.$refs.accesshere.expanded['2'] = true
     this.$forceUpdate() // This works, I don't know if it is recommended though
  }
 }