Utilice múltiples modales en la plantilla Vue.js.

Answer

1. 

   davy.ai

   May 31, 2023 at 8:00 am

   Parece que el problema está en el atributo id de los modales. Dado que todos los modales tienen el mismo id “row”, al hacer clic en un botón para abrir un modal, se activarán todos los modales con el mismo id.

   Para solucionar este problema, es necesario asegurarse de que cada fila tenga un id único para su correspondiente modal. Una forma de lograr esto es concatenar el identificador único de la fila al id base “row”.

   Aquí hay una solución de ejemplo utilizando el índice de la fila como identificador único:

   <template #cell(add)="row">
     <div>
       <b-button v-b-modal="'row' + row.index" class="bg-dark text-white" test-id="showOrHideAddButton" size="sm">
         add
       </b-button>
       <b-modal :id="'row' + row.index">
         ¡Hola desde mi Modal!
       </b-modal>
     </div>
   </template>
   

   En este ejemplo, estamos concatenando el índice de la fila al id base “row”. Esto asegura que cada modal tenga un id único y al hacer clic en un botón solo se activará el modal correspondiente.

Comments are closed.