How to use events in Vue 3 Composition

[emp-sean]

Anyone able to shed some light on how to use the events with the composite API of Vue 3.

Needing to use the clear functionality.

[christine927t]

@emp-sean I got this working by doing the following:

Added ref="address" to the vue-google-autocomplete element
<vue-google-autocomplete id="editAddressStreet3" ref="address" v-model="props.editAddress.street" placeholder="Address line 1" v-on:placechanged="getAddressData"></vue-google-autocomplete>

declared the ref in my script setup:
let address = ref('')

called the clear function in my code:
address.value.clear()

[thomaspaulin]

If you want to use the events from within the handler functions, rather than reactive values like @christine927t said, I found the following worked for me:

<script setup>
import VueGoogleAutocomplete from "vue-google-autocomplete";

function getAddressData(e) {
  console.log("address from event:", e)
}
</script>

<template>
  <vue-google-autocomplete
      id="map"
      classname="form-control"
      placeholder="Please type your address"
      @placechanged="getAddressData"
      country="sg">
  </vue-google-autocomplete>
</template>

<style scoped>

</style>

With the following versions:
"vue": "^3.5.10"
"vue-google-autocomplete": "^1.1.4",