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

Question

I'm creating a 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 with the list of files.

The list is called tableRows and it has several objects. I provide an example below.

script

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

The table is built well, but I'm not capable to use the modal for each table row.

The modal example on the site works well, where I use just one variable (i.e. dialog) and I want to show just one single modal, however in my case, I have a list of objects, where each object may open a specific modal.

I've tried to put the showDownloadDialog attribute in each object from my list and bind it using v-model (v-model='props.item.properties.showDownloadDialog'), but to no avail. The modal does not open.

template

<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>

I've tried to print on the page the attribute props.item.properties.showDownloadDialog and it does not change when I click on the button. I believe this attribute is not reactive, because of that, its state does not change, but I don't get why it is not reactive. The props from data table seems to be a copy and not a reference for one record in my list tableRows.

example

I've already tried to add a simple flag in data () called showDownloadDialog, instead of using props.item.properties.showDownloadDialog, and it works, but it shows all the modals at the same time, not just the specific modal related to that record, unfortunately.

Would anyone know what can be happening?

Thank you in advance.

You can use only one modal not duplicating modal for the whole list. When you click on the record show the modal and just pass the parameters(the required data from which record you have clicked) and fill the modal content. — Subash
With your tips I was able to fix my problem. Thank you so much Subash for your help. — rmmariano

rmmariano rmmariano · Accepted Answer · 2019-05-24T13:33:20

I was able to fix my problem by using Subash's help. I give the code below.

First, I've inserted a new property in my data (). I will use this property to show/close my modal and provide information to fill it.

downloadDialog: {
  show: false
}

Inside data table I just let the button and I've created a method called showDownloadDialog where I pass the properties object (i.e. where the information is).

<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>

Outside data table, I've added v-dialog and I've bound it with downloadDialog. In addition to it, I've created a method to close the dialog.

<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>

Inside the showDownloadDialog I merge 'properties' into 'downloadDialog' and I open the modal, while closeDownloadDialog I just close the modal.

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

Thank you so much Subash for your help.

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

1 Answers