Данные Dynami c из v-for отображаются в импортированном виде с использованием слотов

Question

Проблема: У меня есть v-for карточек с интерполированными данными. Когда кто-то щелкает карточкой, он запускает модальный компонент (отдельный компонент, используя slots).

Я хочу отобразить данные (title, img, previewUrl, downloadUrl) для любой карточки, которая была нажата в модальном режиме. , но в настоящее время я получаю сообщение об ошибке: is not defined on the instance but referenced during render

Очевидно, что данные не передаются в модальный режим, даже если я ссылаюсь на (карту). Я хочу передать ему индекс карты, по которой щелкнули, но не уверен, что это лучший способ сделать это.

Я предполагаю, что слоты можно использовать для передачи данных Dynami c v-for в как я это делаю Надеюсь, мне не придется переключаться на реквизит, поскольку это может привести к мутным вещам.

Пока пробовал: <!-- Cards --> <div class="card-wrapper"> <div v-for="(card, index) in cards" :key="index" class="card"> <div @click="showModal(card)" class="card-body"> <img :src="card.img" alt="resource img" /> <h4 class="card-title">{{ card.title }}</h4> <h6 class="card-subtitle">{{ card.subtitle }}</h6> </div> </div> </div> <!-- MODAL --> <Modal v-show="isModalVisible" @close="closeModal"> <template v-slot:header>{{ img }} </template> <template v-slot:body> {{ title }} <div class="text-center mb-1 mt-2"> <a :href="previewUrl"><button class="modal-btn btn btn-large">Preview</button></a> <a :href="downloadUrl"><button class="modal-btn btn btn-large">Download</button></a> </div> </template> </Modal>

DATA

`cards: [
        {
          title: "Card Title",
          subtitle: "Card subtitle",
          img: require("@/assets/images/test.jpg"),
          previewUrl: "https://test.com",
          downloadUrl: "https://test.com"
        },`

МЕТОДЫ:

  `methods: {
    showModal(card) {
      this.isModalVisible = true;
      this.title = card.title;
      this.img = card.img;
      this.previewUrl = card.previewUrl;
      this.downloadUrl = card.downloadUrl;
      this.isModalVisible = true;
    },
    closeModal() {
      this.isModalVisible = false;
    }
  }`

Импортированный модальный компонент

`<template>
  <div>
    <div class="modal-backdrop" @click.self="close">
      <div class="card relative">
        <button type="button" class="btn-close" @click="close">
          <i class="material-icons">clear</i>
        </button>
        <header class="modal-header mb-1">
          <slot name="header" />
        </header>
        <div class="mt-1 text-center">
          <slot name="header-sub" />
        </div>
        <slot name="body" />
        <footer class="text-center p-2">
          <slot name="footer" />
        </footer>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "modal",

  methods: {
    close() {
      this.$emit("close");
    }
  }
};
</script>`

Answer 1

Вы должны установить модальные данные до и в щелчке установить правильную информацию

, например, у вас data установить

{
modalInfo:{title:'',img:''}
}

затем в click установить их как this

 showModal(card) {
      this.modalInfo.title = card.title;
      this.modalInfo.img = card.img;
      this.isModalVisible = true;
    }

и в части modal установите его следующим образом

        <!-- Cards -->
        <div class="card-wrapper">
          <div v-for="(card, index) in cards" :key="index" class="card">
            <div @click="showModal(card)" class="card-body">
              <img :src="card.img" alt="resource img" />
              <h4 class="card-title">{{ card.title }}</h4>
              <h6 class="card-subtitle">{{ card.subtitle }}</h6>
            </div>
          </div>
        </div>
<!-- MODAL -->
        <Modal v-show="isModalVisible" @close="closeModal">
            <template v-slot:header>{{ modalInfo.img }} </template>
            <template v-slot:body>
              {{ modalInfo.title }}
              <div class="text-center mb-1 mt-2">
                <a :href="previewUrl"><button class="modal-btn btn btn-large">Preview</button></a>