algolia

Vuetify阿尔戈利亚的地方 (Vuetify Algolia Places)

Use Algolia Places with Vuetify.

将Algolia Places与Vuetify一起使用。

安装 (Installation)

Run in your terminal:

在您的终端中运行：

yarn add vuetify-algolia-places

You also need to install algoliasearch and places.js:

您还需要安装algoliasearch和places.js ：

yarn add '[email protected]^3' '[email protected]^1'

Then install the plugin:

然后安装插件：

import Vue from 'vue';
import VuetifyAlgoliaPlaces from 'vuetify-algolia-places';
 
Vue.use(VuetifyAlgoliaPlaces, {
  algolia: {
    appId: '...', // Optional
    apiKey: '...', // Optional
  },
});

用法 (Usage)

Vuetify Algolia Places is still under development, so for now there is no way to specify props nor events.

Vuetify Algolia Places仍在开发中，因此目前尚无法指定道具或活动。

<vuetify-algolia-places v-model="place" />

The variable place looks like this:

可变place如下所示：

{
  "name": "30 Rue du Sergent Michel Berthet",
  "administrative": "Auvergne-Rhône-Alpes",
  "city": "Lyon 9e Arrondissement",
  "country": "France",
  "countryCode": "fr",
  "type": "address",
  "latlng": {
    "lat": 45.7704,
    "lng": 4.80536
  },
  "postcode": "69009",
  "highlight": {
    "name": "<em>30</em> <em>Rue</em> <em>du</em> <em>Sergent</em> <em>Michel</em> <em>Be</em>rthet",
    "city": "Lyon 9e Arrondissement",
    "administrative": "Auvergne-Rhône-Alpes",
    "country": "France"
  },
  "hitIndex": ,
  "query": "30 rue du sergent michel berthet",
  "value": "30 Rue du Sergent Michel Berthet, Lyon 9e Arrondissement, Auvergne-Rhône-Alpes, France"
}

关于初始值的注意事项 (Note about initial value)

If you don't store this kind of object in your application, you can still pass a plain string that is equivalent to the value value, e.g.: 30 Rue du Sergent Michel Berthet, Lyon.

如果没有这种类型的对象存储在您的应用程序，您还可以通过一个简单的字符串，它等效于值value ，例如： 30 Rue du Sergent Michel Berthet, Lyon 。

If this value is not null during the initialization of the component, it will automatically request Algolia API and use the first hit.

如果在组件初始化期间该值不为null ，它将自动请求Algolia API并使用第一个匹配项。

That means if place is equal to 30 Rue du Sergent Michel Berthet, Lyon, it will be automatically transformed to the above JSON object.

这意味着如果place等于30 Rue du Sergent Michel Berthet, Lyon ，它将被自动转换为上述JSON对象。

道具 (Props)

Every props from Vuetify Autocomplete component are supported, except items, loading, search-input.sync, filter and return-object that are used internally.

支持Vuetify Autocomplete组件中的每个道具，但内部使用的items ， loading ， search-input.sync ， filter和return-object除外。

大事记 (Events)

翻译自: https://vuejsexamples.com/use-algolia-places-with-vuetify/