Intento usar algunos de mis complementos jQuery dentro de Alpine (por supuesto, Alpine debería reemplazar jQuery a largo plazo). Este complemento de autocompletar teóricamente funciona como se esperaba, pero no puedo establecer el targetCustomerId desde onSelect(). ¿Cómo puedo acceder y cambiar los valores de las propiedades de mi objeto desde dentro de las funciones de autocompletar?
x-data=" postForm($el.id, 'contracts/add', { targetCustomerId: '<?=$customer->CUSTOMERID;?>', init() { customerInput = $($refs.autocompleteInput).autocomplete({ type: 'POST', serviceUrl: 'api/getCustomers', onSearchStart: function() { $(this).addClass('input-loader') }, onSearchComplete: function() { $(this).removeClass('input-loader') }, onSearchError: function() { $(this).removeClass('input-loader') }, onSelect: function (suggestion) { this.targetCustomerId = suggestion.value; } }); } }) "El postForm() se simplifica algo como esto:
function postForm(formId, url, objSettings) { var defaults = { form: document.getElementById(formId), formData: '', message: '', isLoading: false } return {...defaults, ...objSettings}; }De acuerdo con la documentación de https://github.com/devbridge/jQuery-Autocomplete , dentro del método onSelect , this variable hace referencia al elemento de entrada, por lo que no podemos acceder al contexto de Alpine.js de esta manera, tenemos que usar, por ejemplo $data magic .
Suponiendo que los datos de respuesta se vean así:
{ "suggestions": [ { "value": "Customer 1", "data": 1 }, { "value": "Customer 2", "data": 2 } ] } Entonces, los data se refieren a CustomerId , no al campo de value , al método onSelect modificado:
onSelect: function (suggestion) { $data.targetCustomerId = suggestion.data; } Aquí $data se refiere al objeto de datos de Alpine.js y la suggestion es el elemento de autocompletar en el que se hizo clic.