Reputation: 1581
With v-autocomplete 1.8.2, clicking input field then selecting an item and then selecting with cursor the selected item in input field . Finally if i type, first character not written on the input field, but second third etc. characters are written. i tried hard to set the first character via javascript but i could not.is this a bug or something that can be configured?
My .vue file is:
<template>
<c-auto-complete :items="items" v-model="company" :get-label="gCompany" :min-len="0" :component-item='cList' :wait="150" @update-items="updateCompany" />
</template>
<script>
import router from '@/router'
import { search } from '@/shared/commonUtil'
import cList from '../CompanyList'
import AutoComplete from 'v-autocomplete'
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions, mapGetters } = createNamespacedHelpers('company')
export default {
name: 'header-select-company',
components: {
cAutoComplete: AutoComplete
},
data: () => {
return {
company: {},
cList: cList,
items: []
}
},
computed: {
...mapState([
'companies', 'cCode', 'cName'
]),
...mapGetters([
'getCompany'
])
},
methods: {
...mapActions([
'setCompany'
]),
updateCompany (word) {
console.log('AAAAAAAAAAAAAAAAA - ' + word.charCodeAt(0))
this.items = search(this.companies, word)
},
gCompany (item) {
if (item) {
return item.name
}
return ''
}
},
watch: {
company (val) {
if (val && (val['code'] !== this.cCode && val['name'] !== this.cName)) {
this.setCompany(val)
if (this.$router.currentRoute.path === '/dashboard') {
router.go()
} else {
// router.push('/dashboard')
router.go()
}
}
}
},
created () {
this.company['code'] = this.cCode
this.company['name'] = this.cName
}
}
</script>
<style>
.v-autocomplete .v-autocomplete-input-group.v-autocomplete-selected .v-autocomplete-input{color:green;background-color:#f2fff2;height: 35px;
margin-right: 15px;}.v-autocomplete .v-autocomplete-list{width:100%;text-align:left;border:none;border-top:none;max-height:400px;overflow-y:auto;border-bottom:1px solid #157977}.v-autocomplete .v-autocomplete-list .v-autocomplete-list-item{cursor:pointer;background-color:#fff;padding:10px;border-bottom:1px solid #157977;border-left:1px solid #157977;border-right:1px solid #157977}.v-autocomplete .v-autocomplete-list .v-autocomplete-list-item:last-child{border-bottom:none}.v-autocomplete .v-autocomplete-list .v-autocomplete-list-item:hover{background-color:#eee}.v-autocomplete .v-autocomplete-list .v-autocomplete-list-item abbr{opacity:.8;font-size:.8em;display:block;font-family:sans-serif}pre{white-space:pre-wrap;background-color:#eee;border:1px solid silver;padding:20px!important;border-radius:10px;font-family:monospace!important}.left,pre{text-align:left}.note{border-left:5px solid #ccc;padding:10px}.v-autocomplete{position:relative}.v-autocomplete .v-autocomplete-list{position:absolute}.v-autocomplete .v-autocomplete-list .v-autocomplete-list-item{cursor:pointer}.v-autocomplete .v-autocomplete-list .v-autocomplete-list-item.v-autocomplete-item-active{background-color:#f3f6fa}
</style>
Upvotes: 0
Views: 284