Проблема с передачей идентификатора, чтобы открыть модальное в vue для конкретного элемента - PullRequest
Новая
       18

Проблема с передачей идентификатора, чтобы открыть модальное в vue для конкретного элемента

1 голос
/ 07 апреля 2020

Проблема, с которой я здесь сталкиваюсь, заключается в том, что у меня есть модал с «Рекомендованной книгой» на основе prop.item.type.name.

Когда я нажимаю «Рекомендованную книгу», он открывает модальный режим для все предметов. Я попытался передать prop.item.id с openBookDialog, но это не решило проблему. Пожалуйста, помогите мне решить эту проблему.

Шаблон 

<v-data-table :headers="headers" :items="books" :disable-initial-sort="true" :mustSort="true" hide-actions class="edition-table">
 <template slot="items" slot-scope="props">
  <td>{{ props.item.type.name }}</td>
  <td>{{ props.item.created_at }}</td>
  <td><a v-if='props.item.file_download_url' @click="downloadFile(props.item.file_download_url)" href="#" class="details-link"><span class="hidden-xs-only">Download</span><span class="hidden-sm-and-up">Download</span></a></td>
  <td>
    <a @click="openBookDialog(props.item.id)" href='javascript:void(0);' class="details-link"><span class="hidden-xs-only">Suggested Book</span><span class="hidden-sm-and-up">Suggested Book</span>                    
    </a>                                              
    <v-dialog v-model="bookDialog" max-width="1275">
      <FilteredBookModal :document="props.item.file_type"/>
      <div class="text-xs-right">
        <v-btn class='vue-file-button text-right' @click="closeBookDialog(props.item.id)" >Close</v-btn>
        </div>
    </v-dialog>
  </td>
  <td>
    <a v-if='props.item.purchase_download_url' @click="downloadFile(props.item.purchase_download_url)" href="#" class="details-link"><span class="hidden-xs-only">Download</span><span class="hidden-sm-and-up">Download</span>
    </a>
  </td>
 </template>
</v-data-table>

Экземпляр 

<script>
  data: function() {
    return {
     bookDialog: false,
    }
  },
  openBookDialog() {
    this.bookDialog = true;
  },
  closeBookDialog() {
    this.bookDialog = false;
  },
</script>

1 Ответ

1 голос
/ 07 апреля 2020

Сделать bookDialog объектом, который может содержать состояние открытия / закрытия для каждого элемента, а не только 1 глобальное состояние: 

data() {
  return {
    bookDialog: {}
  }
}

Открытие и закрытие на основе аргумента (ничего не делается вообще с аргументом в примере выше): 

openBookDialog(id) {
  this.$set(this.bookDialog, id, true);
},
closeBookDialog(id) {
  this.$set(this.bookDialog, id, false);
}

Установить v-model каждого диалога на основе id тоже: 

<v-dialog v-model="bookDialog[props.item.id]" max-width="1275">
...