I am trying to call a tailwind modal from a table where the rows are generated from a for loop in vue.js with v-for
, but the modal fails to be called. However I generate the table without the for loop it works just fine. Here is the code:
Table code (with v-for loop)
<div >
<table
>
<thead
>
<tr>
<th scope="col" >ID</th>
<th scope="col" >Product name</th>
<th scope="col" >Description</th>
<th scope="col" >Price</th>
<th scope="col" ></th>
<th scope="col" ></th>
</tr>
</thead>
<tbody>
<template v-for="product in products" :key="product.id">
<tr
>
<th
scope="row"
>
{{ product.id }}
</th>
<td >{{ product.name }}</td>
<td >
{{ product.description }}
</td>
<td >{{ product.price }} $</td>
<td >
<IconC
iconName="Pencil"
iconClass="w-5 h-5 text-blue-700 cursor-pointer hover:text-blue-500 rounded-full"
/>
</td>
<td >
<button data-modal-toggle="delete-modal">
Delete
</button>
</td>
</tr>
</template>
</tbody>
</table>
</div>
Modal code (outside the for loop / table)
<div id="delete-modal" tabindex="-1" >
<div >
<div >
<button type="button" data-modal-toggle="delete-modal">
<svg aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<span >Close modal</span>
</button>
<div >
<svg aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
<h3 >Are you sure you want to delete this product?</h3>
<button data-modal-toggle="delete-modal" type="button" >
Yes, I'm sure
</button>
<button data-modal-toggle="delete-modal" type="button" >No, cancel</button>
</div>
</div>
</div>
</div>
CodePudding user response:
For your scenario, I dont think you need the data-modal-toggle
, instead try to open modal in the Viewmodal instead.
<button @click="openModal">
Delete
</button>
openModal() {
// call Modal.open() here
}
You can check out the detail implementation here: https://flowbite.com/docs/components/modal/#example