@fivestarsmobi/vue-dadata
v1.0.5
Published
Vue component for hinting addresses using dadata.ru
Downloads
1
Maintainers
Readme
Vue Dadata
It's a vue component for hinting addresses using DaData.ru.
Install
$ npm install @fivestarsmobi/vue-dadata --save
Usage
Global
import VueDadata from '@fivestarsmobi/vue-dadata'
Vue.use(VueDadata)
Local
<template>
<div id="app">
<vue-dadata token="dadata_api_key"></vue-dadata>
</div>
</template>
<script>
import VueDadata from 'vue-dadata'
export default {
name: 'VueDadataTest',
components: {
'vue-dadata': VueDadata
}
}
</script>
Properties
| Prop | Required | Type | Description |
| ------------- | ------------- | ------------- | ------------- |
| token | Yes | string | Auth token DaData.ru |
| placeholder | No | string | Text placeholder |
| query | No | string | Initial state input field |
| autoload | No | boolean | If true
, then a request for tips will be initialed in the background in the created hook |
| onChange | No | function(suggestion: DadataSuggestion) -> void | Function called when selecting a tooltip |
| autocomplete | No | string | Autocomplete field |
| defaultClass | No | string | Default class ofr component, default value - vue-dadata
|
| classes | No | string | Extra classes |
| inputName | No | string | Input name attribute |
| fromBound | No | string | Dadata bound type FROM |
| toBound | No | string | Dadata bound type TO |
| highlightClassName | No | string | CSS class name applied to highlighted text |
| unhighlightClassName | No | string | CSS class name applied to unhighlighted text |
| highlightTag | No | string | Type of tag to wrap around highlighted matches; defaults to mark
but can also be a component |
| locationOptions | No | object | Location options for choosing cities or countries |
| metro | No | boolean | Metro display or not |
Dependencies
Issue Reporting
If you have found a bug or if you have a feature request, please report them at this repository issues section.
Contributors
Licensed under the MIT license.