'Vue 3: Set property value to Modal

I have a button as follows:

<template>
  <button
    type="button"
    class="btn btn-primary er fs-6 px-8 py-4"
    data-bs-toggle="modal"
    :data-bs-target="`#${modalId}`"
  >
    {{ buttonText }}
  </button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "modal-card",
  props: {
    title: String,
    description: String,
    buttonText: String,
    image: String,
    modalId: String,
    accountId: String,
  },
  components: {},
});
</script>

Clicking it opens a Modal component as defined by :data-bs-target="#${modalId}"

How do I set in that Modal Component the value of accountId? I tried through a property but not sure how to set it when using :data-bs-target

thank you so much in advance.

vue.jsvuejs3


Solution 1:[1]

I ended up changing the button to having both the :data-bs-target and the @click as follows (which apparently works)

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#kt_modal_1" @click="settings(item)">

and the modal I just pasted at the top of the page:

  <div class="modal fade" tabindex="-1" id="kt_modal_1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Modal title {{ currentItem.id }}</h5>

The settings function sets the currentItem:

 settings(item) {
      this.currentItem = item;
    },

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Guy Hagemans

Related Questions