我正在使用 Vuetify 创建一个数据表以显示记录列表,其中每条记录都有一个要下载的文件列表。然后,我为每个表格行创建一个按钮,当它被单击时,它应该显示一个带有文件列表的模式。
该列表被调用tableRows
,它有几个对象。我在下面提供一个例子。
脚本
export default {
data () {
return {
tableRows: [
{
'properties': {
'date': '2015-12-19',
'title': 'LC82200632015353LGN01',
'type': 'IMAGES',
'showDownloadDialog': false
},
'provider': 'DEVELOPMENT_SEED'
},
...
],
showDownloadDialog: false // example
}
}
}
该表构建良好,但我无法为每个表行使用模式。
网站上的模态示例运行良好,我只使用一个变量(即dialog
)并且我只想显示一个模态,但是在我的例子中,我有一个对象列表,其中每个对象都可以打开一个特定的模态。
我尝试将showDownloadDialog
属性放在列表中的每个对象中并使用v-model
(v-model='props.item.properties.showDownloadDialog') 绑定它,但无济于事。模态不打开。
模板
<v-data-table :items='tableRows' item-key='properties.title'>
<template v-slot:items='props'>
<tr class='tr-or-td-style-border-right'>
<td class='text-xs-left th-style-height'>
<div class='text-xs-center'>
...
<!-- Download button -->
<br>
title: {{ props.item.properties.title }}
<br>
showDownloadDialog: {{ props.item.properties.showDownloadDialog }}
<br>
<v-btn @click.stop='props.item.properties.showDownloadDialog = true' title='Show download list'>
<i class='fas fa-download'></i>
</v-btn>
<v-dialog v-model='props.item.properties.showDownloadDialog' persistent scrollable max-width="600">
<v-card>
...
<v-card-actions>
<v-btn @click='props.item.properties.showDownloadDialog = false'>
Close
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</td>
</tr>
</template>
</v-data-table>
我试图在页面上打印属性props.item.properties.showDownloadDialog
,当我单击按钮时它不会改变。我相信这个属性不是反应性的,因此,它的状态不会改变,但我不明白为什么它不是反应性的。来自props
数据表似乎是一个副本,而不是我列表中一条记录的参考tableRows
。
例子
我已经尝试在data ()
called中添加一个简单的标志showDownloadDialog
,而不是 using props.item.properties.showDownloadDialog
,并且它可以工作,但不幸的是,它同时显示了所有模态,而不仅仅是与该记录相关的特定模态。
有人知道会发生什么吗?
先感谢您。