Can I compile a list of cities exclusively by using vuetify-google-autocomplete?

Can the vuetify-google-autocomplete be configured to only list cities as shown in this image?

https://i.sstatic.net/PPs3E.png

Currently, my autocomplete feature is set to search for full addresses by default.

https://i.sstatic.net/g70ar.png

I have searched through the documentation and other sources but could not find any information on how to achieve this. Any guidance on this would be appreciated.

Here is a snippet of my code:

App.js :

import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';

Vue.use(VuetifyGoogleAutocomplete, {
  apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxx',
  installComponents: true,
  vueGoogleMapsCompatibility: false
});

Component.js :

<vuetify-google-autocomplete
  type="text"
  ref="location"
  v-model="location"
  id="map"
  v-on:placechanged="getAddressData"
>

Answer №1

A solution exists! Simply follow these steps:

  <vuetify-google-autocomplete
      id="map"
      placeholder="Location"
      types="(cities)"
  >
  </vuetify-google-autocomplete>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to programmatically prevent the back button from functioning if the previous route pathname in React was 'Login'?

When it comes to navigating back on previous pages, the traditional back button is typically used instead of relying solely on the navigation bar. However, I am currently looking to disable this feature specifically when the next previous route in line is ...

Transitioning seamlessly between components and tags

Can Vue handle switching between components and tags in the same way it can switch between components? <component :is="component"></component> For example, I need a button component to be enclosed with a router-link tag if a path is ...

Troubleshooting: Issue with onclick event in vue.js/bootstrap - encountering error message "Variable updateDocument not found"

As a newcomer to frontend development, I have a basic understanding of HTML5, CSS, and Javascript. Recently, I started working on a vue.js project where I integrated bootstrap and axios. Everything seemed to be working fine until I encountered an issue whe ...

The browser failed to display the SVG image, and the console log indicated that the promise was rejected, with the message "false."

I'm struggling to understand why my SVG isn't showing up on the screen. The console log is displaying "false," which I believe indicates that a promise was rejected Here is the TypeScript file I am working with: export class PieChartComponent im ...

The jQuery function appears to be running multiple times in a loop

For some reason, every value in my JSON object is getting added to the "listOfCountries" array twice. It seems like there might be a loop going through the result object more than once. I could really use some assistance with this issue! var listOfCountri ...

Rendering text with three.js in the scene

I'm just starting out with three.js. For my project, I need to create a 3D graphical website. After doing some research on Google, I discovered that three.js is a great tool for manipulating WebGL with ease. In the three.js documentation(), TextGe ...

Ways to Retrieve the Index of Elements in the DOM Array Generated by the querySelectorAll() Function in JavaScript

const items = document.querySelectoAll('.class') console.log(items) // Array with 15 elements (This array contains a total of 15 elements) ...

What causes an error when jqXHR.abort() is invoked in the beforeSend function?

Attempting to interrupt ajax call with beforeSend in case of a specific condition. Upon executing jqXHR.abort() or return false, I encounter the following error message: TypeError: $.ajax(...).fail is not a function .fail(function (jqXHR, textStatus, er ...

How can I make an HTML button function with a JavaScript script?

When I click a button in an HTML file, it should trigger a function in a JavaScript file to display an alert that says "hey." However, this simple task is not working for me and I am unsure why. Java Script is enabled in my browser (Google Chrome) and I am ...

I'm working on separating the functionality to edit and delete entries on my CRM model, but I'm having trouble finding a way to connect these buttons with my data fields

I am encountering some difficulties while trying to implement separate functionality for editing and deleting items on my CRM model. I have already created the necessary API in Angular, but I am struggling to bind these buttons with my field. Any assistanc ...

Experience the combined power of addthis, isotope, and nicescroll - all in a single

I am utilizing a WordPress template that includes a set of share buttons from AddThis. <ul class="addthis extra"> <li class="addthis-hold"> <div class="addthis_toolbox" addthis:url="<?php the_permalink( ...

Nuxt is throwing an error because it cannot find the definition for Stripe

I'm having trouble integrating Stripe elements into my Nuxt.js page and I keep getting an error. Error: Stripe is not defined I have added the <script src="https://js.stripe.com/v3/"></script> to my nuxt.config.js Here's my code: ...

What is the best way to acquire an ID that is generated dynamically?

Being new to javascript and ajax, I am facing a challenge. I have a while loop with 2 buttons, both of which seem to function correctly, except for one small issue... The product-id is only being passed for the first or last element in the loop. How can I ...

Typescript encounters transpilation issues when the spread operator is omitted for undefined values {...undefined}

I am currently working on a TypeScript project where I have encountered a peculiar issue. Within some of my TypeScript files, I am including a plain JavaScript/Node file named config.js. The content of config.js is as follows: 'use strict'; modu ...

Why is Puppeteer failing to download to the designated folder using "Page.setDownloadBehavior" in Windows?

When trying to download a file using Puppeteer, I found that the code works perfectly on a Mac OS machine but fails on a Windows machine. The code snippet I used is shown below: await page._client.send( 'Page.setDownloadBehavior', { beha ...

Encountering a 404 error in an AngularJS app within Cordova on Android

Currently, I am working on an android application using Cordova and AngularJS (front-end framework OnsenUI). Below is the code snippet for my GET request to retrieve data from the server: $http.get(url+"getlotterylist").then(function(msg){ $scope. ...

Is it possible to eliminate the array from a property using TypeScript?

Presenting my current model: export interface SizeAndColors { size: string; color: string; }[]; In addition to the above, I also have another model where I require the SizeAndColors interface but without an array. export interface Cart { options: ...

Fluctuating display issues arise when attempting to display both non-authenticated and authenticated content on a single page

(Nuxt project) I am currently facing a challenge in displaying both non-authenticated and authenticated content on the same page. I have been exploring two potential solutions but each has its drawbacks. The first option involves determining in the mount ...

Flask caches JSON files automatically

I am currently working on a visualization app using js and python. The functionality of my app is as follows: There is a textbox in the browser where I input an URL The URL is then sent to Python via Flask In Python, the URL is processed to create ...

Ways to access a function variable within an AJAX `done` function

This is the JavaScript function I am working with: $('.editable').change(function () { event.preventDefault(); var el_text = this.lastElementChild; var action = this.action; var method = this.method; var data = $(this).serialize(); ...