topninja
Vue Dadata
It's a vue component for hinting addresses using DaData.ru.
Install
$ npm install @fivestarsmobi/vue-dadata --saveUsage
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
- axios
- core-js
- vue
- vue-class-component
- vue-property-decorator
- vue-highlight-words
- vue-debounce-decorator
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.