Vue Dadata

It's a vue component for hinting addresses using DaData.ru.

| Version | Description | |-----------|----------------------| | 1.*.* | Old version for vue2 | | 2.*.* | New version for vue2 | | 3.*.* | New version for vue3 |

Install

npm package

# old version vue2
$ npm install [email protected] --save
# new version vue2 (in progress)
$ npm install [email protected] --save
# vue3 (in progress)
$ npm install vue-dadata --save

Usage

<template>
  <div class="vue-truncate-html-example">
    <vue-dadata
      v-model="query"
      :token="token" />
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue';
  import { VueDadata } from 'vue-dadata';
  import 'vue-dadata/dist/style.css';

  export default defineComponent({
    name: 'VueTruncateHtmlExample',
    components: {
      VueDadata,
    },
    setup() {
      const query = ref('');

      return {
        token: import.meta.env.VITE_APP_DADATA_API_KEY,
        query,

      };
    },
  });
</script>

Properties

| Prop | Required | Type | Description | Default | |------------------|----------|------------|----------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------| | token | Yes | string | Auth token DaData.ru | - | | modelValue | Yes | string | v-model for query | - | | suggestion | No | object | v-model for suggestion | undefined | | placeholder | No | string | Text placeholder | '' | | url | No | string | special url for dadata api | 'https://suggestions.dadata.ru/suggestions/api/4_1/rs/suggest/address' | | debounceWait | No | string | waiting time | '1000ms' | | disabled | No | boolean | disabled | false | | fromBound | No | string | Dadata bound type FROM | undefined | | toBound | No | string | Dadata bound type TO | undefined | | inputName | No | string | Input name attribute | 'vue-dadata-input' | | locationOptions | No | object | Location options for choosing cities or countries | undefined | | classes | No | object | classes | DEFAULT_CLASSES | | highlightOptions | No | object | highlight options for vue-word-highlighter | DEFAULT_HIGHLIGHT_OPTIONS | | autocomplete | No | boolean | can autocomplete query, after blur | undefined |

Peer dependencies

• vue

Dependencies

• axios
• vue-debounce
• vue-word-highlighter

Copyright (c) 2019 - 2022 Ivan Monastyrev [email protected]. Licensed under the MIT license.