Vue Events
Binding the Autoaddress Vue Component Events
The Autoaddress component is event driven, and we have provided the opportunity for you to hook into these events and add your own logic with custom callback functions. These events range from when the component is initialised all the way to the end when your address has been found.
We also pass data back in key events so you can grab this data and perform custom actions to suit your own needs.
See below for details on when these events are triggered and how you can access them.
How to access a callback event and bind to functions
You can also bind the callback functions to other functions containing your logic, like in the example below
<Autoaddress licencekey ="your_key" vanitymode = {true} addressprofile = "Demo5LineV2" //Search Lifecycle Callback Events @onInitialize = "callbackFunction('$event')" @onAutoCompleteSelected = "callbackFunction(''$event')" @onSearchStart = "callbackFunction('$event')" @onSearchCompleted = "callbackFunction('$event')" @onAddressFound = "callbackFunction('$event')" //Error Callback @onLookupError = "callbackFunction('$event')" //User Events Callback @onChange = "callbackFunction('$event')" @onClear = "callbackFunction('$event')" @onFocus = "callbackFunction('$event')" /> <script> methods: { callbackFunction (data) { //Your Logic Here } } </script>
Search Lifecycle Callbacks
Option | Description | Type | Default |
---|---|---|---|
onInitialize() | Invoked once the Autoaddress component is completely initialised. | function() | null |
onAutoCompleteSelected(item) | Invoked once an item has been selected from the autocomplete dropdown. | function() | null |
onSearchStart() | A request is about to be made to the FindAddress API. | function() | null |
onSearchCompleted(data) | Invoked when a response has been received from the FindAddress API search, the full response data is now available to you. Check the Find Address API page to examine the response format. This event is invoked after every search performed using the component. i.e. when the search button is hit or an item is selected from autocomplete. | function() | null |
onAddressFound(data) | Invoked when a response has been received from the FindAddress API search, the full response data is now available to you. Check the Find Address API page to examine the response format. Similar to onSearchCompleted(data) but only fired when this is the final result for the search. This is the most important callback since this will only be called when the component has found a final result for the address or Eircode with no further options available. |
function() | null |
onSearchCompleted(data)
and
onAddressFound(data)
callbacks are called. The
data
parameter passed back to the callbacks contains the response from the API response. See below for an example of a JSON response.
{ "result": { "code": 100, "text": "PostcodeAppended" }, "postcode": "D08DW25", "addressId": 1700286134, "addressType": { "code": 2150, "text": "ResidentialAddressPoint" }, "matchLevel": { "code": 2, "text": "AddressPoint" }, "postalAddress": [ "APARTMENT 49", "CAVALRY HOUSE", "CLANCY QUAY", "SOUTH CIRCULAR ROAD", "DUBLIN 8" ], "vanityAddress": [ "Apartment 49", "Cavalry House", "Clancy Quay", "South Circular Road", "Dublin 8" ], "reformattedAddressResult": { "code": 100, "text": "Success" }, "reformattedAddress": [ "Apartment 49, Cavalry House", "Clancy Quay", "South Circular Road", null, "Dublin 8" ], "totalOptions": 0, "options": [], "input": { "key": "YOUR_KEY", "txn": "fc1f98cd-605a-494e-b87c-06a8bfe2a629", "address": "APARTMENT 49, CAVALRY HOUSE, CLANCY QUAY, SOUTH CIRCULAR ROAD, DUBLIN 8", "addressId": 1700286134, "language": "en", "country": "ie", "smartGroupingIndex": null, "isVanityMode": true, "addressProfileName": "Demo5LineV2" }, "links": [ { "rel": "self", "href": "http://api.autoaddress.ie/2.0/findaddress?key=YOUR_KEY&address=APARTMENT+49%2c+CAVALRY+HOUSE%2c+CLANCY+QUAY%2c+SOUTH+CIRCULAR+ROAD%2c+DUBLIN+8&addressId=1700286134&vanityMode=True&addressProfileName=Demo5LineV2" } ] }
Error Callbacks
Option | Description | Type | Default |
---|---|---|---|
onLookupError(data) | Invoked when an error has occured during a search. | function() | null |
onLookUpError(data)
When an error occurs within the component, a message is returned detailing the source of the problem.
{ "httpStatusCode": { "code": 401, "text": "Unauthorized" }, "requestUrl": "https://api.autoaddress.ie/2.0/findaddress?key=YOUR_KEY&address=4%20INNS%20COURT%2C%20WINETAVERN%20STREET%2C%20DUBLIN%208&addressId=1004420615&limit=20&vanityMode=True&callback=foo", "errors": [ { "type": { "code": 401005, "text": "AccessToRestrictedData" }, "message": "Data unavailable. Only sample addresses and dummy eircodes available.", "helpUrl": "http://www.autoaddress.ie" } ] }
User Action Callbacks
Option | Description | Type | Default |
---|---|---|---|
onChange(value) | Invoked when the value of the input in the search field is changed. | function() | null |
onClear() | Invoked when the search field is cleared manually by the user. | function() | null |
onFocus() | Invoked when search fields gains Focus. | function() | null |