Develop Reference

Vuetify v-autocomplete v-text showing the full object instead of text only

Vuetify v-autocomplete v-text showing the full object instead of text only.
here is the code.
data() {
return {
people: [
{ name: "test1", value: 1 },
{ name: "test2", value: 2 },
]
};
},
component
<v-autocomplete
v-model="friends"
:disabled="isUpdating"
:items="people"
item-text="name"
item-value="id"
#change="changed"
filled
chips
color="blue-grey lighten-2"
label="Participants"
multiple
>
Any help? thanks in advance.

Based on the information provided, there doesn't appear to be anything wrong with what you have. However, if you're using v-autocomplete's slot for #item inside your v-autocomplete tab, then that could potentially be the source of the issue.
Having a block like this inside your v-autocomplete component would result in the issue you described:
<v-autocomplete ...>
<template v-slot:item="data">
{{ data }}
</template>
</v-autocomplete>

Your code could work well, please double check with the demo:
https://codesandbox.io/s/vuetify-example-sandbox-forked-9ys2tw?file=/src/components/TestComponent.vue
you can also try another option like:
change item-text to:
item-text="item => item.name"

Pasting text including delimiters into Vuetify combobox does not separate the chips accordingly the delimiters?

I am trying to make a Vuetify combobox with chips splitting what I'm pasting into it according to the delimiters that are defined for that component, for instance ,. Meaning that if I'm pasting the text a,b,c, the component should turn them into 3 different chips: a, b and c but it does not work as such.
Full Vue Source code: https://codesandbox.io/s/chips-so-0gp7g?file=/src/domains/experimental/Experimental.vue
Preview: https://0gp7g.csb.app/experimental
Relevant piece of Vue Source Code:
<template>
<v-container>
<v-row>
<v-col>
<v-combobox
v-model="chips"
chips
:delimiters="[',']"
append-icon=""
clearable
hint="Hey I'm a 🥔 hint!"
persistent-hint
label="Type your favorite 🥔s"
multiple
solo
#update:search-input="meowInput"
>
<template v-slot:selection="{ attrs, item }">
<v-chip
v-bind="attrs"
close
:color="getColor(item)"
#click:close="remove(item)"
>
<strong>🥔{{ item }}</strong
>
</v-chip>
</template>
</v-combobox>
</v-col>
</v-row>
</v-container>
</template>
<script>
import ColorHash from "color-hash";
export default {
name: "Experimental",
components: {},
data() {
return {
select: [],
chips: [],
search: "", //sync search
};
},
methods: {
meowInput(e) {
console.log(e);
},
getColor(item) {
const colorHash = new ColorHash({ lightness: 0.9 });
return colorHash.hex(item);
},
remove(item) {
this.chips.splice(this.chips.indexOf(item), 1);
this.chips = [...this.chips];
},
},
};
</script>
Any idea about how can I achieve that behaviour?

You could bind and sync with the change of search-input, the rest is to split the search value and concat to the chips
search-input: Search value. Can be used with .sync modifier.
<v-combobox
// ...
:search-input.sync="search"
// ...
>
// ...
meowInput(e1) {
if (this.search && this.search.split(",").length > 1) {
this.chips = this.chips.concat(
this.search.split(",").filter((term) => !this.chips.includes(term))
);
this.search = "";
}
}
Forked demo

VuetifyJS Advanced slots autocomplete with Google Places API

I need to get VuetifyJS advanced slots to work with the Google Places API. Currently some addresses only show up in the autocomplete dropdown after clicking the "x" in the form field to delete the input text.
Here is a CodePen demonstrating the issue:
https://codepen.io/vgrem/pen/Bvwzza
EDIT: I just found out that populating the dropdown menu with the suggestions is the issue. The suggestions are visible in the console.log but not in the dropdown. Any ideas how to fix this issue?
(Some addresses work right away, some not at all - it's pretty random.
Any ideas on how to fix this are very welcome.)
JS:
new Vue({
el: "#app",
data: () => ({
isLoading: false,
items: [],
model: null,
search: null,
}),
watch: {
search(val) {
if (!val) {
return;
}
this.isLoading = true;
const service = new google.maps.places.AutocompleteService();
service.getQueryPredictions({ input: val }, (predictions, status) => {
if (status != google.maps.places.PlacesServiceStatus.OK) {
return;
}
this.items = predictions.map(prediction => {
return {
id: prediction.id,
name: prediction.description,
};
});
this.isLoading = false;
});
}
}
});
HTML:
<div id="app">
<v-app id="inspire">
<v-toolbar color="orange accent-1" prominent tabs>
<v-toolbar-side-icon></v-toolbar-side-icon>
<v-toolbar-title class="title mr-4">Place</v-toolbar-title>
<v-autocomplete
v-model="model"
:items="items"
:loading="isLoading"
:search-input.sync="search"
chips
clearable
hide-details
hide-selected
item-text="name"
item-value="symbol"
label="Search for a place..."
solo
>
<template slot="no-data">
<v-list-tile>
<v-list-tile-title>
Search for a <strong>Place</strong>
</v-list-tile-title>
</v-list-tile>
</template>
<template slot="selection" slot-scope="{ item, selected }">
<v-chip :selected="selected" color="blue-grey" class="white--text">
<v-icon left>mdi-map-marker</v-icon>
<span v-text="item.name"></span>
</v-chip>
</template>
<template slot="item" slot-scope="{ item, tile }">
<v-list-tile-avatar
color="indigo"
class="headline font-weight-light white--text"
>
{{ item.name.charAt(0) }}
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title v-text="item.name"></v-list-tile-title>
<v-list-tile-sub-title v-text="item.symbol"></v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action> <v-icon>mdi-map-marker</v-icon> </v-list-tile-action>
</template>
</v-autocomplete>
<v-tabs
slot="extension"
:hide-slider="!model"
color="transparent"
slider-color="blue-grey"
>
<v-tab :disabled="!model">Places</v-tab>
</v-tabs>
</v-toolbar>
</v-app>
</div>
(I enabled the relevant API's in Google Cloud.)

the problem is the number of request you do in a certain amount of time. Every character triggers an request to the GoogleApi which is resulting in.
I think the error_message isn't totally correct while I trying afterwards it gives me a result.
To solve this,
upgrade your GoogleApi account
Debounce your input. so wait till the customer is not typing for half a second and then sen a request to The googleApi. You could use lodash to implement to debounce functionality https://lodash.com/docs/#debounce

<V-Model> doesn't work inside <V-Select> and only give no data available

lets say i want to make 2 text field and 1 v-select in vuejs using vuetify
Comodity ID (v-model = id)
Comodity Name (v-model = name)
v-select (v-model = selectType, :item= ['Using Document ID', id])
but whenever i try using the data such as this.id or id v-select always return No data available
I tried some of this topic but it doesn't solve my problem:
Vue Preselect Value with Select, v-for, and v-model
Vue dynamic v-model within v-for
Vue JS - Bind select option value to model inside v-for
this is my code :
<v-flex lg12 sm12>
<v-text-field label="Kode Penjualan" name="kodePenjualan" v-model="kodePenjualan">
</v-text-field>
</v-flex>
<v-flex lg12 sm12>
<v-text-field label="Komoditas" name="komoditas" v-model="komoditas">
</v-text-field>
</v-flex>
<v-flex lg12 sm12>
<v-select
v-model="selectDocs"
:items="tipeDocs"
label="Dokumen yang Dimiliki"
></v-select>
</v-flex>
this is my script:
data: () => ({
kodePenjualan: null,
komoditas: null,
selectDocs: null,
tipeDocs: [
'Dokumen Usaha Dagang Perantara',
kodePenjualan
],
}),
this is what i got right now
This is what i want to achieved
can someone help me with this?

Finally I can solve this, it seems i must computed tipeDocs properly to update my own :items,
computed: {
tipeDocs() {
return [
'Dokumen Usaha Dagang Perantara',
this.kodePenjualan
]
}
}
I hope this solution can help a lot of people who got stuck at the same problem with me
source : Answer for my question in Vue Forum

Using Vuetify how can I place a search bar over a carousel?

As the title says, I want to place a search bar functionality over a carousel and I'm trying to achieve this using <v-autocomplete> and v-carousel>.
Using the code snippets from the official Vuetify docs, I have managed to have this:
<template>
<v-layout
justify-center
app
>
<v-flex
xs12
sm6
>
<v-container
fluid
grid-list-md
>
<v-layout
row
wrap
>
<!--Carousel-->
<v-flex xs6>
<v-carousel
hide-controls
hide-delimiters
height='200'
interval='2500'
>
<v-toolbar
dark
color="teal"
>
<v-toolbar-title>State selection</v-toolbar-title>
<v-autocomplete
v-model="select"
:loading="loading"
:items="items"
:search-input.sync="search"
cache-items
dense
hide-no-data
hide-details
label="What state are you from?"
solo-inverted
>
</v-autocomplete>
<v-btn icon>
<v-icon>more_vert</v-icon>
</v-btn>
</v-toolbar>
<v-carousel-item
v-for="(item,i) in items"
:key="i"
:src="item.src"
>
</v-carousel-item>
</v-carousel>
</v-flex>
</v-layout>
</v-container>
</v-flex>
</v-layout>
</template>
<script>
<!--I use selective imports. This might not be needed for you when trying to reproduce it -->
import VContainer from "vuetify/lib/components/VGrid/VContainer";
import VFlex from "vuetify/lib/components/VGrid/VFlex";
import VLayout from "vuetify/lib/components/VGrid/VLayout";
import VCard from "vuetify/lib/components/VCard/VCard";
import VImg from "vuetify/lib/components/VImg/VImg";
import VCarousel from "vuetify/lib/components/VCarousel/VCarousel";
import VAutocomplete from "vuetify/lib/components/VAutocomplete/VAutocomplete";
export default {
name: "HomeContents",
data: () => ({
loading: false,
items: [],
search: null,
select: null,
states: [
'Alabama',
'Alaska',
'American Samoa',
'Arizona',
'Arkansas',
'California',
'Colorado',
'Ohio',
'Oklahoma',
'Oregon',
'Washington',
'West Virginia',
'Wisconsin',
'Wyoming'
]
}),
watch: {
search (val) {
val && val !== this.select && this.querySelections(val)
}
},
methods: {
querySelections (v) {
this.loading = true
// Simulated ajax query
setTimeout(() => {
this.items = this.states.filter(e => {
return (e || '').toLowerCase().indexOf((v || '').toLowerCase()) > -1
})
this.loading = false
}, 500)
}
},
components: {
VContainer,
VFlex,
VLayout,
VCard,
VImg,
VCarousel,
VAutocomplete
}
}
</script>
The problems I am facing are the following:
How can I lose the teal toolbar and have just one simple single line to use for searching, that will be positioned in the center of the carousel?
Whenever I click on the search bar, I see this: [object Object]. How do I get rid of this?
With my current implementation, every time I'm searching for a state I'm able to successfully find it but the problem is that the carousel background transition effect stops. So for example, If I search for "Oklahoma" I can see the result but the background carousel transition stops. How can this be fixed?

I'll tackle your questions as you've put them.
1: The teal color is specified in your declaration of v-toolbar.
<v-toolbar
dark
color="teal"
>
You can set this color to anything you want, rgb or hex, so if you want it to be transparent you could do this.
<v-toolbar
dark
color="rgba(0,0,0,0)"
>
To specify the position of the toolbar comes down to styling. You can adjust the default vuetify styles but for a single item like this the easiest way to set styling that will override the default is to use inline styling, like this:
<v-toolbar
dark
color="rgba(0,0,0,0)"
style="position:absolute;top:75px;z-index:400;"
>
As you've set the height, you can position the toolbar to center it. The z-index may be necessary to place it above the carousel. In here you could also style the text color, width etc.
2: In your posted code the reason you are getting [object Object] is because the v-autocomplete is trying to iterate through 'items' which is empty. You have 'states'. Set items like this: :items="states" To get this working as expected I set it up like this:
<v-autocomplete
style="background:rgba(0,0,0,0)"
v-model="select"
:items="states"
:loading="isLoading"
:search-input.sync="search"
color="white"
hide-no-data
hide-selected
item-text="Description"
item-value="state"
label="States"
placeholder="Start typing to Search"
prepend-icon="mdi-database-search"
return-object
>
</v-autocomplete>
Which is straight from the vuetify docs.
3: I can't reproduce the carousel pausing, it continues throughout on mine.
Hope this helps somewhat.