Currently working on an autocomplete feature and I have encountered a hurdle. The issue is with binding the element using v-model:
v-model="input"
When I bind the element using v-model or v-bind, the input element ends up with a blank value. What I actually want is for the element to display an old value or a value fetched from the database, as shown in the code snippet below. I am looking to bind the element's value to my variable named "input" only after the page has fully loaded with data from the DB. Although the code below is functional, I find myself resorting to using document.getElementById to update the element with the new value.
<div id="spvs" class="uk-form-controls">
<input v-on:input="input = $event.target.value" v-on:keyup="getCompanies" name="company" id="company" class="uk-input {{$errors->has('company') ? ' uk-form-danger' : ''}}" placeholder="Enter company name"
value="{{ old('company') || $errors->has('company')
? old('company')
: $property->getCompanyName()
}}">
<div v-if="spvs.length > 0" class="tm-autocomplete-box">
<ul class="uk-list uk-list-striped tm-autocomplete-list">
<li v-for="(spv, key) in spvs" @click="complete(key)"><span uk-icon="plus-circle" class="uk-margin-right"></span> @{{ spv.name }}</li>
</ul>
</div>
</div>
Ideally, I would like to bind the element value to my 'input' variable when the user clicks on one of the autocomplete items, triggering the 'complete' function.
methods:{
complete: function(key){
this.input = this.spvs[key].name;
document.getElementById('company').value = this.input;
this.spvs = '';
},
In essence, I am looking to replace the line below with a more efficient binding method:
document.getElementById('company').value = this.input;