Questions tagged [v-select]
[Vue Select](https://vue-select.org/) is a feature rich select/dropdown/typeahead component. It provides a default template that fits most use cases for a filterable select dropdown. The component is designed to be as lightweight as possible, while maintaining high standards for accessibility, developer experience, and customization, this tag can refer to the Vuetify select component.
v-select
183
questions
0
votes
1
answer
46
views
How does work Vue v-model with update:modelValue and how to prevent it from default logic depending on modal
Can someone explain to me if v-model is:
:modelValue
update:modelValue
then what happen when v-model with update:modelValue used both.
So in my code I have this component:
<script src="https://...
- 39
0
votes
1
answer
28
views
How to pass a function with a parameter to v-select?
How to pass a function with a parameter to v-select?
Tried to do it this way, but nothing works...
I tried doing it through template, but it didn't work either. Maybe I'm doing something wrong.
I need ...
- 1
1
vote
1
answer
55
views
How to customize the input element with a conditional class based on an error state inside v-select Vue library
I try to put class 'has-error' based on condtion and handle vaildation message for that v-select but i don't know how achieve that
https://vue-select.org/
<v-select
v-model="add.city&...
- 31
0
votes
0
answers
35
views
How to customize the direction of input's text that inside v-select
To customize the direction of the input placeholder in the v-select component based on the chosen language in a multilingual website.
<v-select
v-model="add.city"
:options="...
- 31
0
votes
0
answers
70
views
v-select items are not translated (vue-i18n)
I'm trying to get every text associated with an item in my v-select to update in the language I choose, it doesn't work, but for other elements outside the v-select there's no problem.
Here is my ...
- 3
0
votes
2
answers
141
views
How to display modified text from data member in :items object array for item-title in v-select (Vuetify) dropdown list?
I am new to Vue and I am currently working with Vuetify to build dropdown "v-select".
If there is a way, that will be great! Otherwise, I am thinking of creating new array and covert data ...
- 3
0
votes
0
answers
41
views
Vue2 with vSelect, hide the input value when options is not present
I use vSelect from https://www.npmjs.com/package/vue-select;
With the reduce option ":reduce="(x) => x.id" to get the Id as value from arrays of my dataOptions object and the show ...
- 31
0
votes
1
answer
52
views
Weird Situation When Using "Clearable" on VSelect
This is the intended usage of the clearable property on my component:
On parent component:
<v-row>
<v-col>
<Selector :clearable="true"/>
</v-col>
</v-...
- 39
-1
votes
2
answers
103
views
VueJs & Vuetify - V-select outlined
I'm new to VueJS and Vuetify. V-select outlined the label is not placed directly on the border of the field. I have to click in this one first, why ?
My code :
<template>
<v-row>
<...
- 61
1
vote
1
answer
55
views
Veutify v3 multiple select component event binding cannot use @select or @remove
Hi I'm new to veutify and can't seem to find any solution to this question.
in the multiple select component what I would like to achieve is to get the value of the selected option and call a function ...
-1
votes
1
answer
175
views
Personalization of v-select filtering
I use the v-select package in Vue 2
I want to customize the filtering v-select to return rows that start with the input text (the default search returns every row that contains the input text).
I know ...
1
vote
1
answer
495
views
Vuetify v-select displays number 1 below the select after an item is selected
This doesn't happen in examples from the Vuetify website, but in my code it does. After select an item, bellow the select it appears the number 1, no matter which item was selected. The same occurs if ...
- 115
0
votes
1
answer
55
views
Is there any v-select prop I can use to fix this?
At first, everything works fine until I search my option and clicking it.
This is my v-select code:
`<v-select
class="vselect"
v-model="filtro.orgao_origem_id"
id=&...
0
votes
0
answers
424
views
Vuetify 3 - The position of the dropdown from the v-select is wrong
I have a small problem with Vuetify 3.
The **dropdown **from the **select **is moved to the right when I first open it. The second time I open it, it is displayed correctly under the item.
<...
- 11
0
votes
0
answers
72
views
getElementById(id).value is returning undefined or blank for v-select element
I have added a dropdown for one of the columns in a table using v-select. This column is editable for multiple rows at the same time.In edit mode after selecting one of the dropdown values for each ...
- 1
0
votes
0
answers
690
views
How register vue-select component in vue 3 options API app (no TypeScript)?
I try to use vue-select.
main.js:
import { createApp } from "vue";
import App from "./App.vue";
import { VueSelect } from "vue-select";
Then on npmjs.org the ...
- 1,586
0
votes
0
answers
78
views
v-seelct not rendered inside a vee-validate ValidationProvider
I am getting the following error while trying to use a v-select
v-seelct not rendered inside a vee-validate ValidationProvider
Uncaught (in promise) TypeError: Cannot read properties of undefined (...
- 2,191
1
vote
1
answer
569
views
Fill search value with current selection on focus
I am using v-select https://vue-select.org/ in my project.
I'd like to have my search value filled with current selection on focus.
First step is:
My first selection
After I select the first option, I ...
- 15
0
votes
1
answer
266
views
How to decrease list height in v-select vuetify3
I can't decrease list height... list height becomes full screen height
I tried a lot of ways, but nothing happened
0
votes
1
answer
822
views
How to select an element from a v-select dropdown menu in Cypress
I want to get all the elements in a v-select dropdown menu and put them in to a list. To do this I should locate the dropdown menu field firstly. My questions are below:
1.When I want to locate the ...
- 11
1
vote
1
answer
676
views
v-select set number of items shown in dropdown Vuetify
I have the following v-select:
It has 7 items (for each weekday) but I want it to show all 7 when it's opened, not only the first 6 with a scrollbar. I can't seem to find an v-select API option for ...
- 175
0
votes
1
answer
1k
views
Vuetify - v-select not scrolled to pre-selected value
I have a v-select dropdown (vuetify), which are a list of time-slots with 15 minutes interval
['00:00','00:15'...'23:55']
Let us call it startTime which is pre-defined to f.x '12.00' and is binded ...
- 59
1
vote
1
answer
1k
views
Vuetify v-select items-text property does not work in v3. (Fill value in v-select Vue3)
I use Vuetify v3 and try to fill a v-select by using items and items-text property but it doesn't work.
The v-select display 2 empty slot.
<v-select ref="structure" :items="...
- 63
0
votes
1
answer
104
views
Vue JS v-select cannot diplaying text from json
I have difficulty using vue-select (v-select) when editing data. Currently v-select displays the ID, the data that should appear is the text or label.
const detailPresensi = {
detail_data: [{
...
0
votes
0
answers
46
views
Component vuejs2 setting default value and then passing that back to the parent
Update: I have some vue code, main.vue which I would like to call a component, which does three things:
Allows the user to pass to the component a set of items, one of which can be selected in the ...
- 83
0
votes
0
answers
892
views
Style a v-autocomplete dropdown [vuetify]
I have a dropdown menu that I would like to style.
When it's up, the dropdown looks like this.
And when it's down, it looks like this.
This yellow border is just a border-bottom style that I added ...
- 65
2
votes
1
answer
3k
views
how to detect clear button click on v-select (vue-select)
I was creating a drop-down in v-select, after selecting a option when clicking on clear button I need to clear the drop down and change option array to initial stage.
How to check clear button (x) is ...
0
votes
1
answer
2k
views
v-select component is not showing selected option in v-select box
I am facing one problem while working with v-select component. V-select component is not showing selected item... It is showing options in dropdown but after selecting it is showing blank in select ...
- 85
0
votes
0
answers
940
views
how to focus on v-select programmatically?
I am using Nuxt3, how to set focus() on v-select programmatically?
Basically, OnSubmit I want to validate the value. And if it is blank, I want to focus on the v-select programmatically.
Is it ...
- 549
0
votes
1
answer
315
views
Vue Js v-model on v-select show wrong value
I have somekind of bug on my v-select which cause the v-model to show different value than the real value of the variable. I use a method to change the selected option which work for the first change. ...
- 13
1
vote
0
answers
113
views
v-select, compare two array to display the right value as the default value
I have this array
appRightZone: [
{label:"Third", value: 50, editable: true},
{label:"Contacts", value: 100, editable: true},
{...
0
votes
1
answer
639
views
Create array of objects for a select based on items from a data table
So I have a data table in Vuetify that's containing eventlog items. For example, it looks like this:
[{
"id": 1,
"actionBy": "John",
"...
- 192
0
votes
1
answer
119
views
Pass the index value to the search function for v-select inside a loop
Have the following vue loop
<div class="row w-100 form-group" v-for="(item, index) in affectedParties">
...
<div class="col-md-6">
<v-...
0
votes
1
answer
539
views
Two v-data-tables, second table has v-select that uses the data from the first table in the dropdown. Somehow is bound to newest data
I have two v-data-tables that are being rendered in a component. The first one is imported from another file as the matching-game-crud-table. This is the answer table. This first table manipulates ...
0
votes
1
answer
2k
views
V-Select Readonly Bug
I am using Vue.js as a frontend framework and Vuetify framework.
I have a page where the users view the document. And all the fields are readonly.
There's an "edit" button which upon ...
- 31
1
vote
1
answer
1k
views
Vuetify v-select not trigger select event on option click with custom template
I am using Vuetify beta version (v3.0.0-beta.6) because I have to use Vue 3 and Vuetify 2.x is not supported by it.
I want to create an i18n selector with the country flag icon.
To manage i18n I use ...
- 113
0
votes
1
answer
1k
views
VueJs v-select edit selected via methods
What im trying to achieve is:
when i select the option "Alle openstaande" (result_id = 0), i want to select all these result_ids: [-1,-2,-3,-5,-7,-8,-11,-12] and deselect result_id 0.
var ...
- 43
0
votes
2
answers
646
views
RESOLVE - Vue.js v-select with v-if
I need a little help with v-select. I would like to have two v-select, but one will change when I choose a value on the over. For example :
I have a list of countries (France, England and Spain)
I ...
2
votes
3
answers
5k
views
Get data from v-select field
I'm getting stuck on getting the data from my v-select input. Within console.log whenever I type it's just repeating an empty string with no data being sent.
Input
<v-select name="user" ...
- 648
1
vote
1
answer
1k
views
Trying to install v-select getting Vue is not defined
New to Vue, but trying to get v-select working. I'm getting vue is not defined when importing. Then when I import vue I'm getting a different error as listed below:
main.js
import { createApp } from '...
- 648
0
votes
1
answer
37
views
Show main options at the beggining of and array for Vue select list?
In the country select list dropdown for example, I want to show the most common selected options first, but also show them in their usual ordered-by-name position along the full array. I also plan to ...
- 81
1
vote
1
answer
3k
views
Vue v-select problem with v-slot not showing text
I'm trying to display custom text in v-select options by slots.
Template:
<v-select v-model="dLevelSelected" :items="dLevels" solo>
<template slot="item" slot-...
- 15
0
votes
3
answers
1k
views
how to work with v-select inside b-table?
I'm working with v-select elements inside a b-table but i've a problem when i put the "responsive" property in my b-table. It looks as if the v-select is contained within the table even when ...
0
votes
0
answers
812
views
Vuetify: How to correctly set active item when using prepend on v-select
When I use the prepend-item v-slot for the v-select component, selecting an item actives another item instead of the one that was selected.
Take this code pen example found on the vuetify docs. Notice ...
2
votes
2
answers
2k
views
How to add extra option to v-select after setting :items prop
I have a v-select, written like this :
<v-select
ref="v_select_folder"
dense
hide-details
v-...
- 521
1
vote
0
answers
1k
views
How can i validate v-select multiple with vee-validate 'ValidationProvider'
I want to validate a multiple select filed (v-select) with vee-validate validationProvider.
For single select option it is working fine. but when i am trying for the multiple select it is not working.
...
1
vote
2
answers
812
views
Vuetify show select options nicely
My select options covering my label "Download".
I've tried to add offset-y, but the result is still bad.
<v-select offset-y dense outlined :items="downloadOptions" label="...
- 57.4k
2
votes
1
answer
508
views
V-select not being able to support bigints
When clicking in a select that lists items with really big integers as 738883988997898200, the select options hang in the screen and we can't proceed.
We can't proceed because we are inside a v-form ...
0
votes
1
answer
668
views
Vuetify - How would you embed a 'Select' component within a Header/text tag?
I'm a backend developer doing front-end work so bear with me.
Imagine a big header at the top of a web page:
Below is the list of stock available to ↓users-dropdown↓
If you clicked the ↓users-dropdown↓...
- 67
-1
votes
1
answer
2k
views
How do I watch for onChange of specific select menu that was dynamically generated?
I have a row of 3 inputs. It lay out like this:
Attribute (select) > Operators (select) > Value (text)
UI look like this:
Code for that:
<v-row v-for="(rule, index) in rules" :...
- 57.4k