在vue中使用自定义模态，在另一个组件内两次仅渲染第一个组件数据

Question

所以问题是我正在 Laravel Vue 应用程序中工作，两者都是不同的应用程序。我面临的问题是我在 VUE JS 中使用 bootstrap 创建了一个模态组件。 我将该模式用于两个不同的组件，用于创建数据和编辑该数据。因此，我创建了两个不同的组件，分别用于 createdata 和 editdata，并在这两个组件中调用模态组件。这两个组件在另一个组件 viewAllData 中被调用。 Createdata 组件工作正常，但在渲染 Editdata 组件时，它会渲染 CreateData 组件字段，我不知道为什么。我怎样才能用其他方式做到这一点。

下面是我使用的代码

对于模态：

<template>
  <button
    type="button"
    :class="btnClass"
    data-bs-toggle="modal"
    data-bs-target="#staticBackdrop"
  >
    <slot name="btn-title"></slot>
  </button>

  <div
    class="modal fade"
    id="staticBackdrop"
    data-bs-backdrop="static"
    data-bs-keyboard="false"
    tabindex="-1"
    aria-labelledby="staticBackdropLabel"
    aria-hidden="true"
    ref="theModal"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="staticBackdropLabel">
            <slot name="dialog-header"></slot>
          </h1>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <slot></slot>
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-secondary"
            data-bs-dismiss="modal"
          >
            Close
          </button>
          <button type="button" class="btn btn-primary" @click="success()">
            Ok
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Modal } from "bootstrap";
export default {
  props: ["btnClass"],
  emits: ["on-success"],
  data() {
    return {
      theModal: null,
    };
  },
  methods: {
    success() {
      this.$emit("on-success", this.theModal);
    },
  },
  mounted() {
    this.theModal = new Modal(this.$refs.theModal);
  },
};
</script>

下面是createdata组件

<template>
  <backdrop-dialog-close-success
    btnClass="btn btn-success"
    @onSuccess="onSuccess"
  >
    <template #btn-title>Add New</template>
    <template #dialog-header>Add New Company</template>
    <template #default>
      <form>
        <div class="mb-3">
          <label for="companyName" class="form-label">Company Name</label
          ><asterisk-symbol />
          <input
            type="text"
            class="form-control"
            id="companyName"
            aria-describedby="emailHelp"
            v-model="companyName"
          />
        </div>
      </form>
    </template>
  </backdrop-dialog-close-success>
</template>
<script>
import BackdropDialogCloseSuccess from "../UI/BackdropDialogCloseSuccess.vue";
import AsteriskSymbol from "../misc/AsteriskSymbol.vue";
export default {
  components: {
    BackdropDialogCloseSuccess,
    AsteriskSymbol,
  },
  emits: ["on-success"],
  data() {
    return {
      companyName: "",
    };
  },
  methods: {
    onSuccess(modalInstance) {
      const formBody = { company_name: this.companyName };
      this.axios
        .post(
          this.$Constants.BaseUrl + this.$Constants.ApiEndpoints.AC_COMPANY,
          formBody
        )
        .then((res) => {
          if (res.status === 200) {
            console.log(res);
            this.$Methods.toastSuccess(res.data.message);
            modalInstance.hide();
            this.$emit("on-success");
          }
        })
        .catch((err) => {
          this.$Methods.toastError(err.response.data.message);
        });
      modalInstance.hide();
    },
  },
};
</script>

下面是Editdata组件

<template>
  <BackdropDialogCloseSuccess btnClass="btn btn-outline-warning">
      <template #btn-title>Edit</template>
      <template #dialog-header>Edit Company</template>
    <template #default>Tests</template>
  </BackdropDialogCloseSuccess>
</template>
<script>
import BackdropDialogCloseSuccess from "../UI/BackdropDialogCloseSuccess.vue";
export default {
  components: { BackdropDialogCloseSuccess },
};
</script>

下面是viewalldata组件

<template>
  <TableView>
    <template #card-header>
      <h3 class="card-title">All Air-Conditioners</h3>
      <div class="row">
        <div class="ml-auto col-2">
          <add-new-company @on-success="fetchCompanyData"></add-new-company>
        </div>
      </div>
    </template>
    <template #table-header>
      <th>Sr No.</th>
      <th>Compnay Name</th>
      <th>AC Count</th>
      <th>Actions</th>
    </template>
    <template #default>
      <tr v-for="(company, index) in companyDetails" :key="company.company_id">
        <td>{{ index + 1 }}</td>
        <td>{{ company.company_name }}</td>
        <td>{{ company.ac_count }}</td>
        <td>
          <EditCompany></EditCompany>
          <!-- <span @click="editHandler(company.company_id)" class="show-pointer">
            <i
              class="fas fa-edit p-2"
              style="color: rgb(255, 153, 0); font-size: 22px"
            ></i>
          </span> -->
          <span @click="deleteHandler(company.company_id)" class="show-pointer">
            <i class="fas fa-trash p-2" style="color: red; font-size: 22px"></i>
          </span>
        </td>
      </tr>
    </template>
  </TableView>
  <!-- Button trigger modal -->
</template>
<script>
import TableView from "../UI/TableView.vue";
import AddNewCompany from "./AddNewCompany.vue";
import EditCompany from "./EditCompany.vue";
export default {
  components: { TableView,AddNewCompany, EditCompany},
  data() {
    return {
      companyDetails: [],
    };
  },
  methods: {
    fetchCompanyData() {
      this.axios
        .get(this.$Constants.BaseUrl + this.$Constants.ApiEndpoints.AC_COMPANY)
        .then((res) => {
          if (res.status === 200) {
            this.companyDetails = res.data.data;
          }
        })
        .catch((err) => {
          this.$Methods.toastError(err.response.data.message);
        });
    },
    editHandler(id){
      console.log(id);
    },
    deleteHandler(){

    }
  },
  mounted() {
    this.fetchCompanyData();
  },
};
</script>

单击“添加新”按钮时 这个效果很好

但是当点击“编辑”按钮时” 这渲染添加数据字段为什么我不明白，以及如何渲染不同的数据

我想以类似的方式将不同的数据渲染到该模式

编辑

这里是沙盒代码，您可以在其中检查错误。它不是完整的代码副本，但错误仍然存在

Answer 1

由于您使用相同的模式来编辑和添加公司选项，因此您需要单独识别每个模式，以便单击按钮显示该特定模式。

目前，当添加和编辑模态在 DOM 中呈现时，所有模态都具有相同的 id，因此当单击任何按钮（添加或编辑）时，第一个匹配的模态将被激活，在您的情况下它是添加模态。

要解决此问题，您需要在每个模式中添加唯一的 ID，并在按钮上添加相同的唯一目标，以便单击特定按钮启用正确的模式。

将唯一的 key 属性传递给模态组件，并使用其值生成按钮的目标和模态的 id。在编辑和添加按钮上传递这个独特的关键道具。

// Props passing for add and edit component
<add-new-company @on-success="fetchCompanyData" uniqueKey="addData"/>
<EditCompany :uniqueKey="company.company_id"/>


// Add a method to generate unique target value for the button
<button
  type="button"
  :class="btnClass"
  data-bs-toggle="modal"
  :data-bs-target="getTarget()"
> ... </button>

// Add the unique key passed as prop to the modal div
<div
  class="modal fade"
  :id="uniqueKey"
  data-bs-backdrop="static"
  data-bs-keyboard="false"
  tabindex="-1"
  aria-labelledby="staticBackdropLabel"
  aria-hidden="true"
  ref="theModal"
> ... </div>

// Method for generating the target for the button
getTarget() {
  return `#${this.uniqueKey}`
}