I am using v-autocomplete component building bit complex complex component where I can not use any property from data. I am using v-model from computed property.
Here I am trying to use $refs to get the value. But I can not fetch it or can not use $refs properly that I have written in scanWarehouseOuter() method.
The this.$refs.inputFromOutside.$el.querySelector("input").value is working good using v-text-field not I am unable to use this in v-autocomplete.
The output from console.log is value = null.
Any help will be appreciated.
<v-autocomplete
v-bind:solo="solo"
ref="inputFromOutside"
:items="location_list"
prepend-icon="mdi-camera"
v-bind:outlined="outlined"
v-model="generatedLocation"
append-outer-icon="mdi-tools"
@change="scanWarehouseOuter()"
@click:prepend="isBarcode=true"
@click:append-outer="dialog = true"
/>
<script>
export default{
data(){
location_list:['1-12-7', '1-12-8']
},
generatedLocation: {
get() {}
set(value){}
}
},
methods:{
scanWarehouseOuter(){
let value = this.$refs.inputFromOutside.$el.querySelector("input").value; // <--- not working
console.log(value) // = null
}
}
</script>