Vue.js / Vuetify / v-data-table: элемент из v-slot, похоже, является копией, а не ссылкой на атрибут - PullRequest
Новая
       49

Vue.js / Vuetify / v-data-table: элемент из v-slot, похоже, является копией, а не ссылкой на атрибут

0 голосов
/ 23 мая 2019

Я создаю таблицу данных с помощью 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.

пример

enter image description here

Я уже пытался добавить простой флаг в data () с именем showDownloadDialog вместо использования props.item.properties.showDownloadDialog, и он работает, но он показывает все модалы одновременно, к сожалению, не только конкретный модал, связанный с этой записью.

Кто-нибудь знает, что может происходить?

Заранее спасибо.

1 Ответ

0 голосов
/ 24 мая 2019

Мне удалось решить мою проблему с помощью помощи Subash.Я даю код ниже.

Сначала я вставил новое свойство в data ().Я буду использовать это свойство, чтобы показать / закрыть мой модал и предоставить информацию для его заполнения. 

downloadDialog: {
  show: false
}

Внутри таблицы данных я просто отпустил кнопку и создал метод с именем 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>

За пределами таблицы данных я добавил 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 я объединяю «свойства» в «downloadDialog» и открываю модальное окно, а closeDownloadDialog Iпросто закройте модал. 

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

Большое спасибо Subash за вашу помощь.

...