来自 v-for 的动态数据显示在使用槽的导入模式中答案

【问题标题】：Dynamic data from v-for displayed in imported modal using slots来自 v-for 的动态数据显示在使用槽的导入模式中
【发布时间】：2020-02-15 13:18:28
【问题描述】：

问题： 我有一张带有插值数据的卡片v-for。当有人点击一张卡片时，它会触发一个模态组件（单独的组件，使用slots）。

我想显示在模式中单击的任何卡片的数据（标题、img、previewUrl、downloadUrl），但目前我收到一个错误： is not defined on the instance but referenced during render

很明显，即使我引用的是（卡片），数据也没有传递到模式中。我想将被点击的卡片的索引传递给它，但不确定最好的方法。

我假设插槽可用于以我正在执行的方式传递动态 v-for 数据。我希望我不必切换到道具，因为那会弄得一团糟。

目前尝试过：  <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 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>

数据

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

【问题讨论】：

@elichen 你能给我一个使用我的代码的例子吗？我不确定这是否可以引用 v-for 数组中单击的项目。
事实并非如此。在您的情况下，您应该在数据中设置一个属性，并在单击中设置正确的信息。我用示例发布答案

标签： javascript vue.js modal-dialog

【解决方案1】：

您应该在点击之前和点击中设置正确的信息

例如在你data设置

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

然后在click 中这样设置

 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>

【讨论】：