Vue.js/Vuetify/v-data-table：来自 v-slot 的项目似乎是副本而不是属性的引用

Question

我正在用文件列表创建 data table with Vuetify to show a list of records, where each record has a list of files to download. Then, I'm creating a button, for each table row, that when it is clicked, it should show a modal。

列表名为 tableRows，它有几个对象。我在下面提供了一个例子。

脚本

export default {
  data () {
    return {
      tableRows: [
        {
            'properties': {
              'date': '2015-12-19',
              'title': 'LC82200632015353LGN01',
              'type': 'IMAGES',
              'showDownloadDialog': false
            },
            'provider': 'DEVELOPMENT_SEED'
         },
         ...
      ],
      showDownloadDialog: false   // example
    }
  }
}

table 构建良好，但我无法为每个 table 行使用模式。

站点上的 modal 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，当我点击按钮时它没有改变。我相信这个属性不是反应性的，因此，它的状态不会改变，但我不明白为什么它不是反应性的。数据 table 中的 props 似乎是一份副本，而不是我列表 tableRows.

中一条记录的参考

例子

我已经尝试在 data () 中添加一个名为 showDownloadDialog 的简单标志，而不是使用 props.item.properties.showDownloadDialog，它有效，但它显示 all 不幸的是，模态同时存在，而不仅仅是与该记录相关的特定模态。

有人知道会发生什么吗？

提前致谢。

Answer 1

我能够通过使用 Subash 的帮助解决我的问题。我给出下面的代码。

首先，我在 data () 中插入了一个新的属性。我将使用这个属性到 show/close 我的模式并提供信息来填充它。

downloadDialog: {
  show: false
}

内部数据 table 我只是让按钮，我创建了一个名为 showDownloadDialog 的方法，我在其中传递 properties 对象（即信息所在的位置）。

<v-btn flat icon color='black' class='v-btn-style' 
  @click='showDownloadDialog(props.item.properties)' title='Show download list'>
    <i class='fas fa-download'></i>
</v-btn>

外部数据 table，我添加了 v-dialog 并用 downloadDialog 绑定了它。除此之外，我还创建了一个关闭对话框的方法。

<v-dialog v-model='downloadDialog.show' persistent scrollable max-width="600">
  <v-card>
    ...
    <v-card-actions>
      <v-btn @click='closeDownloadDialog()'>
        Close
      </v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>

在 showDownloadDialog 中，我将 'properties' 合并到 'downloadDialog' 中，然后打开模式，而 closeDownloadDialog 我只是关闭模式。

showDownloadDialog (properties) {
  // merge 'properties' into 'downloadDialog'
  Object.assign(this.downloadDialog, properties)
  this.downloadDialog.show = true
},
closeDownloadDialog () {
  this.downloadDialog.show = false
}

非常感谢 Subash 的帮助。

Vue.js/Vuetify/v-data-table：来自 v-slot 的项目似乎是副本而不是属性的引用

Vue.js / Vuetify / v-data-table: item from v-slot seems to be a copy and not a reference for the attribute

vue.js

modal-dialog

vuetify.js

v-model