我真的只是不确定插槽范围是如何工作的。想知道是否有人可以帮助我解决这个(看似)非常简单的问题。
<v-data-table>
<template slot="items" slot-scope="props">
<tr @click="props.expanded = !props.expanded">
我要做的是手动更新“ Prop ”以根据外部事件扩展这一行。问题是,我无法弄清楚如何在上述上下文之外访问它。
props.expanded = !props.expanded
工作得很好。有任何想法吗?
最佳答案
组件中似乎没有内置方法。由于数据表创建了它自己的扩展对象并且不使用传入的 prop。
您可以使用引用。 Vue page on child component refs 。
以下代码将数据表上的 ref 设置为 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
}
}
关于javascript - Vue.js 和 Vuetify 插槽范围,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/47685855/