Básicamente, tengo una aplicación web vue y creé un contenedor con varias tarjetas de arranque. Las tarjetas tienen un botón que colapsa un formulario que he creado para que los invitados lo soliciten. Sin embargo, cuando presiono el botón de una tarjeta, colapsa el formulario de aplicación de todas las tarjetas a la vez. Para arreglar eso, tengo que darle a cada tarjeta individual una id específica que coincida con los controles de data-bs-target y aria-controls del botón. Hasta aquí todo bien.

Creé una variable card_id y la inserté en los valores de los atributos con v-bind , pero no funciona. La razón es que el atributo data-bs-target necesita un hashtag antes del nombre de la variable real, pero no puedo encontrar la manera de hacerlo.

Ejemplo de código:

 <button class="btn btn-primary" type="button" data-bs-toggle="collapse" :data-bs-target="card_id" aria-expanded="false" :aria-controls="card_id">Apply now!</button> <div class="collapse" :id="card_id"> <div class="card card-body"> <GuestForm></GuestForm> </div> </div>

Obviamente, no puedo poner un hashtag delante de la variable, entonces, ¿cuál es mi próxima mejor solución para esto? Gracias de antemano.