根據單擊的按鈕ID將正確的Props集注入Modal

我正面臨一個問題，我確信它很容易解決，但是，我無法找出解決方案。問題如下：

我正在寫一個Vue.js應用程式。我有一個包含 3 個按鈕的組件。每個按鈕都旨在觸發一個 Modal 組件，并將正確的 header 和 body 注入 Modal 供用戶閱讀。我可以將單個標題和正文硬編碼到模態中沒有問題，但是，我很難將正確的按鈕與注入模態的正確的道具集連接起來。

我的代碼如下：

帶有一組按鈕的組件，用于觸發 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單擊右鍵時向 Modal 注入權利（例如 Button1 注入 ID 為 1 的 modalMessage 等）？我嘗試了一些解決方案，但似乎都沒有。如果有任何幫助，我將不勝感激！非常感謝你！

uj5u.com熱心網友回復：

您可以設定和傳遞modalMessagesinshowModal方法的索引，并在模態組件中系結道具：

Vue.component('modal', {
  template: `
  <transition name="modal-fade">
    <div >
      <div >
        <header >
          <slot name="header">{{ title }}</slot>
          <button type="button"   @click="close">x</button>
        </header>
        <section >
          <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>

標籤：javascript Vue.js Vuejs2

上一篇：如何在切換下拉選單上添加互斥性

下一篇：js將一個影像輸入值分配給另一個