Modal in loop with draggable

The issue you're facing is likely due to the way the dialogInstance and the modal are being handled. When you loop through and create multiple modals, each modal needs its own instance. However, in your current setup, you're using a single dialogInstance for all modals, which can cause unexpected behavior, such as only the first modal's data being logged.

To resolve this, you should create a separate modal instance for each modal element. Here's how you can modify your code to achieve this:

1. Use a ref to store modal instances for each modal.
2. Initialize the modal instance inside the onMounted lifecycle hook for each modal.

Here's an updated version of your script:

<script setup>
import { nextTick, onMounted, ref } from "vue";
import { Modal } from "bootstrap";
import { useForm } from "@inertiajs/vue3";

const props = defineProps({
  list: Object,
});

const dialogInstances = ref({});

const handleCancel = (modalId) => {
  form.reset();
  form.clearErrors();
  dialogInstances.value[modalId].hide();
};

onMounted(async () => {
  await nextTick();
  const modalElement = document.getElementById(`createCardModal-${props.list.id}`);
  if (modalElement) {
    dialogInstances.value[props.list.id] = new Modal(modalElement, {
      backdrop: 'static'
    });
  }
});

const emit = defineEmits(["created"]);
const form = useForm({
  title: "",
  description: "",
  kanban_card_list_id: null,
  kanban_board_id: null,
});

const handleCreateCard = (modalId) => {
  console.log(kanban_card_list_id.value, kanban_board_id.value);
  form.post(route("crm.company.kanban.card.store"), {
    onSuccess: () => {
      form.reset();
      emit("created");
      dialogInstances.value[modalId].hide();
    },
  });
};

const kanban_card_list_id = ref(null);
const kanban_board_id = ref(null);

const handleSetValue = (list) => {
  kanban_card_list_id.value = list.id;
  kanban_board_id.value = list.kanban_board_id;
};
</script>

<template>
  <button class="btn btn-sm btn-primary"
          :data-bs-target="`#createCardModal-${props.list.id}`"
          data-bs-toggle="modal"
          type="button"
          @click="handleSetValue(props.list)"
  ><i class="bi bi-plus-lg"></i>
  </button>
  <div :id="`createCardModal-${props.list.id}`"
       ref="createCardModal"
       class="modal fade"
       tabindex="-1"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Add New Card</h5>
          <button aria-label="Close"
                  class="btn-close"
                  data-bs-dismiss="modal"
                  type="button"
                  @click="handleCancel(props.list.id)"
          ></button>
        </div>
        <div class="modal-body">
          <div class="container-fluid p-1">
            <div class="row">
              <div class="col-12">
                <BFormFloatingLabel label="Title"
                                    label-for="title"
                >
                  <BFormInput id="title"
                              v-model="form.title"
                              :state="(form.errors.title) ? false : null"
                              type="text"
                  />
                </BFormFloatingLabel>
                <BFormInvalidFeedback :state="(form.errors.title) ? false : null"
                                      :text="form.errors.title"
                />
              </div>
            </div>
            <div class="row mt-2">
              <div class="col-12">
                <BFormFloatingLabel label="Description"
                                    label-for="description"
                >
                  <BFormTextarea id="description"
                                 v-model="form.description"
                                 :state="(form.errors.description) ? false : null"
                                 class="textarea"
                  />
                </BFormFloatingLabel>
                <BFormInvalidFeedback :state="(form.errors.description) ? false : null"
                                      :text="form.errors.description"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="d-flex justify-content-between w-100">
            <button class="btn btn-secondary"
                    data-bs-dismiss="modal"
                    type="button"
                    @click="handleCancel(props.list.id)"
            >
              Cancel
            </button>
            <button class="btn btn-success"
                    type="button"
                    @click="handleCreateCard(props.list.id)"
            >
              Create
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.textarea {
  height: 10rem;
}
</style>

Key Changes:

• Unique Modal IDs: Each modal now has a unique ID based on the list.id.
• Separate Modal Instances: A ref object dialogInstances is used to store modal instances keyed by their unique IDs.
• Dynamic Handling: The handleCancel and handleCreateCard functions now accept a modalId parameter to operate on the correct modal instance.

This setup ensures that each modal operates independently, and the correct data is logged and processed for each modal.