Question

我真的不确定插槽范围是如何工作的。想知道是否有人可以帮我解决这个看似非常简单的问题。

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

我要做的是手动更新“props”以根据外部事件展开此行。问题是，我无法弄清楚如何在上面提到的上下文之外访问它。 props.expanded = !props.expanded工作得很好。

有什么想法吗？

Answer 1

似乎没有内置于组件的方法。由于数据表创建了自己的扩展对象，因此不使用传入的prop。

您可以使用参考。 Vue page on child component refs

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

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

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

来访问该对象

这是codepen显示它的实际效果。

扩展对象存在问题，并且在第一次展开行之前不会填充它。所以如果你做了类似下面的事情。它不会看到这些更改（除非您强制更新组件），因此不会立即扩展该行。

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

Vue.js和Vuetify插槽

1 个答案: