Vue 3:将属性值设置为Modal

Question

我有一个按钮如下：

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

单击它将打开由:data-bs-target="#${modalId}“定义的Modal组件

如何在该模块组件中设置accountId的值？我试过一个属性，但不确定如何在使用:data-bs-target时设置它。

提前谢谢你。

Answer 1

最后，我将按钮更改为:data-bs-target和@click，如下所示(这显然有效)

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

我刚贴在页面顶部的模态：

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

设置函数设置currentItem：

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