根据点击的按钮 ID 将正确的 Props 集注入 Modal

Question

我遇到了一个问题，我确信这个问题很容易解决，但是，我想不出解决办法。问题如下：

我正在编写 Vue.js 应用程序。我有一个包含 3 个按钮的组件。每个按钮都是为了触发一个 Modal 组件，并将正确的 header 和 body 注入到 Modal 中以供用户阅读。我可以将单个 header 和 body 硬编码到 Modal 中没问题，但是，我在如何将正确的按钮与正确的 Props 集连接到 Modal 中时遇到困难。

我的代码如下：

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

<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 的 modalMessage 等）？我尝试了一些解决方案，其中 none 似乎有效。如果有任何帮助，我将不胜感激！谢谢！

Answer 1

可以在showModal方法中设置和传递modalMessages的索引，并在modal组件中绑定props:

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>

根据点击的按钮 ID 将正确的 Props 集注入 Modal

Inject the right set of Props into Modal based on clicked button ID

javascript

vue.js

vuejs2