Tengo un campo de selección que muestra productos y luego se pueden guardar. Como quería tener una opción de búsqueda, también uso select2.

Edité todo el código en un archivo .twig e incluí jquery y select2 de la siguiente manera:

 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script> <script> $(document).ready(function() { $('.js-example-basic-multiple').select2(); }); </script>

Uso Vue para mostrar los productos y determinar el valor.

 <select v-model="productEdit.productId" name="productEdit.productId" class="js-example-basic-multiple form-select" style="width: 100%" required> <option v-for="product in productsAvailable" :value="product.id">[[ product.groupName]] - [[ product.price.currency() ]]</option> </select>

No puedo usar el botón Enviar porque ya no paso un valor. Antes de eso, no usaba Select2 y el código funcionaba bien.

¿Cuál es el motivo de la pérdida del valor y cómo puedo cambiarlo?