Javascript 来自v-for的动态数据使用插槽以导入模式显示

问题： 我有一张带有插值数据的卡片的

v-for

。当有人单击一张卡时，它会触发一个模式组件（使用

插槽将组件分开）

我想显示在模式中单击的任何卡的数据（标题、img、预览URL、下载URL），但目前我收到一个错误：
不是在实例上定义的，而是在渲染期间引用的

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

我假设插槽可以用我的方式传递动态v-for数据。我希望我不必改用道具，那样会把事情搞得一团糟

目前已尝试：

{{card.title}
{{card.subtitle}


{{img}}
{{title}}

数据

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

`
清楚的
导出默认值{
名称：“模态”，
方法：{
关闭（）{
本.$emit（“close”）；
}
}
};
`


您应该在单击设置正确信息之前和中设置模态数据

例如，在您的
数据
集合中

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

然后在
中单击
如下设置

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

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

在
模式中
部分将其设置为

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

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


{{card.title}
{{card.subtitle}
{{modalInfo.img}}
{{modalInfo.title}}
@elichen你能用我的代码给我举个例子吗？我不确定在v-for数组中引用单击的项是否有效。事实并非如此。在您的情况下，您应该在数据中设置属性，然后单击“设置正确的信息”。我用例子给出答案