So, what is the right way to use reactive data with this plugin?

[mauricemojito]

I'm trying to use 2 autocompletes in one form. So I need to get the value of each input, but I can't find the right information to do it. I read about the :init-value, but It didn't work. I looked at the directive, but the only reactive data is type.Is there a work around?

[mauricemojito]

Okay, one work around is using:
onShouldGetData="getFilter"and :onSelect="setFilter"

getFilter(value) {
this.filter = value;
axios.get('/api/location?filter=' + value)
.then(response => {
this.options = response.data.data;
});
},
setFilter(value) {
this.filter = value.name;
}

But is there a more cleaner way to do it?

[animexxx]

I have the same question and I wanna get the value when not select any result too.

[dmouroutis]

If I understood that correctly, you basically want to know the input value at any given moment without user having to select an option?

If yes then you could use the following prop on component

<autocomplete
...
:onInput="callbackEvent"

Basically you do not interrupt (if you don't want to) the automatic ajax request but you access your input value every time.

[animexxx]

I use :onBlur="selectBlur" and querySelector to get the value then it solved my problem.

selectBlur: function () {
var val = this.$el.querySelector('.autocomplete-input').value;
this.roomProp.cus_name = val;
}

#Note: should use the id selector instead of class if you have many autocomplete in a document