根据单击按钮ID将正确的道具注入模态

Question

我正在面临一个问题，我敢肯定这很容易解决，但是，我无法找出解决方案。 问题是：

我正在编写vue.js应用程序。我有一个带有3个按钮的组件。每个按钮旨在触发模态组件，并将右标头和主体注入模态供用户阅读。我可以将单个标头和主体硬编码为模态没有问题，但是，我很难将正确的按钮与将正确的道具组合到模态中。

我的代码如下：

其中包含一组按钮的组件，旨在触发模态组件：

<template>
  <div class="container">
    <div class="wrapper-child-info">
      <div class="info-wrapper">
        <button class="myButton" @click="showModal">Button1</button>
        <br />
        <button class="myButton" @click="showModal">Button2</button>
        <br />
        <button class="myButton" @click="showModal">Button3</button>
//Hard coding the title and bodyMessage triggers the Modal well -> Done for testing purposes -  needs to be eddited; so the Modal title and body change when different buttons are clicked
        <Modal  title='This is my Modal title' bodyMessage='This is my Modal body message' v-show="isModalVisible" @close="closeModal"/>
      </div>
    </div>
    <div class="wrapper-child-gallery">
      <div class="gallery-wrapper">
          <SimpleGallery galleryID="my-test-gallery" :images="images" />
      </div>
    </div>
  </div>
</template>

<script>

import SimpleGallery from '../components/PhotoGallery.vue';
import Modal from '../components/Modal.vue';

export default {
  name: 'homePage',
  components: {
    SimpleGallery,
    Modal
  },

  data() {
    return {
      images: [],
      isModalVisible: false,
      modalMessages: [
        { id: 1, title: 'This is my First Modal title', bodyMessage: 'This is my first Modal message' },
        { id: 2, title: 'This is my Second Modal title', bodyMessage: 'This is my second Modal message' },
        { id: 3, title: 'This is my Third Modal title', bodyMessage: 'This is my third Modal message' },
      ]
    };
  },

  mounted() {
    this.importAll(require.context('@/assets/images/', true, /\.png$/));
  },

  methods: {
    importAll(r) {
      r.keys().forEach(key => (this.images.push({ largeURL: r(key), thumbnailURL: r(key) })));
    },
    showModal() {
        this.isModalVisible = true;
      },
      closeModal() {
        this.isModalVisible = false;
      }
  },
};
</script>

我的模态组件：

<template>
<transition name="modal-fade">
  <div class="modal-backdrop">
    <div class="modal">
      <header class="modal-header">
        <slot name="header">
          {{ title }}
        </slot>
        <button
          type="button"
          class="btn-close"
          @click="close"
        >
          x
        </button>
      </header>

      <section class="modal-body">
        <slot name="body">
          {{ bodyMessage }}
        </slot>
       </section>
    </div>
  </div>
</transition>
</template>

<script>
  export default {
    name: 'Modal',
    methods: {
      close() {
        this.$emit('close');
      },
    },
    props: ['title', 'bodyMessage']
  };
</script>

任何人都可以指向我如何将正确的modalmessages在右边的模式单击按钮（例如，button1注入ID 1等）？我尝试了一些解决方案，但它们似乎都没有用。 我会非常感谢任何帮助！ 谢谢！

Answer 1

您可以在modalMessages中设置并传递showmodal方法的索引，并在模态组件中绑定道具：

Vue.component('modal', {
  template: `
  <transition name="modal-fade">
    <div class="modal-backdrop">
      <div class="modal">
        <header class="modal-header">
          <slot name="header">{{ title }}</slot>
          <button type="button" class="btn-close"  @click="close">x</button>
        </header>
        <section class="modal-body">
          <slot name="body">{{ bodyMessage }}</slot>
         </section>
      </div>
    </div>
  </transition>
  `,
  methods: {
    close() {
      this.$emit('close');
    },
  },
  props: ['title', 'bodyMessage']
})

new Vue({
  el: '#demo',
  data() {
    return {
      isModalVisible: false,
      selected: null,
      modalMessages: [{ id: 1, title: 'This is my First Modal title', bodyMessage: 'This is my first Modal message' }, { id: 2, title: 'This is my Second Modal title', bodyMessage: 'This is my second Modal message' }, { id: 3, title: 'This is my Third Modal title', bodyMessage: 'This is my third Modal message' },]
    };
  },
  methods: {
    showModal(id) {
      this.selected = this.modalMessages.find(m => m.id === id)
      this.isModalVisible = true;
    },
    closeModal() {
      this.isModalVisible = false;
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <div class="container">
    <div class="wrapper-child-info">
      <div class="info-wrapper">
        <div v-for="(msg, i) in modalMessages" :key="i">
          <button class="myButton" @click="showModal(msg.id)">Button {{ msg.id }}</button>
        </div>
        <Modal :title='selected?.title' :body-message='selected?.bodyMessage' v-show="isModalVisible" @close="closeModal"/>
      </div>
    </div>
  </div>
</div>