When using JavaScript to set the value of an input in my Vue method, it initially appears to work. However, when I try to save the data, it only saves what was typed before the value was updated by the method. For example, if I type new yor and select "New York" from the options, triggering the method to update the value with the place ID for that location. But upon saving the data (submit button) and checking it in the database, it still shows new yor, not the updated value. While I know I can use @click or @change events, I'm unsure if that's the best approach in this case. How can I modify my code to ensure Vue captures the updated value?
methods: {
autocomp() {
const searchInput = document.getElementById('searchTextField');
const autocomplete = new google.maps.places.Autocomplete(searchInput);
autocomplete.addListener('place_changed', function(){
var place = autocomplete.getPlace();
searchInput.value = place.place_id
})
},
HTML
<div class="input-group">
<input v-model="newPost.businessid" @keyup="autocomp" type="text" placeholder="Business ID" class="form-control" id="searchTextField">
</div>