How I can use v-autocomplete for <input type="text">
I need When the user clicks on the suggested text(under input), it is inserted into the input text
As per my understanding, You want to fill the input text field with the selected option from the v-autocomplete dropdown. If Yes, Just curious to ask - Why do you want to insert the selected option in the input as v-autocomplete by default showing the selected value ?
Demo :
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
selected: null,
itemList: [{
name: 'Item 1'
},{
name: 'Item 2'
},{
name: 'Item 3'
},{
name: 'Item 4'
}]
})
})
<script src="https://unpkg.com/vue#2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify#2.6.6/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify#2.6.6/dist/vuetify.min.css"/>
<div id="app">
<v-app id="inspire">
<v-autocomplete
v-model="selected"
:items="itemList"
label="Select Item"
item-text="name"
item-value="name"
>
</v-autocomplete>
<v-text-field v-bind:value="selected"></v-text-field>
</v-app>
</div>
Related
In my application, when inserting a v-data-table inside a v-dialog, it is losing part of its CSS style.
Looking at the HTML, the class "v-application" and "v-application--is-ltr" are not being applied to v-dialog.
I need the same classes that are applied to all components inside ("v-application" and "v-application--is-ltr"), inside . Without these classes the is without application of some CSS. I imagine that even inside a v-dialog I could use a v-data-table and it would work
I've done several tests, like adding a v-row before the v-dialog, adding a v-container, putting v-col, removing v-col.
A lot of tests and I couldn't find a solution.
Has anyone gone through this problem?
Thank you very much in advance
Tables inside dialogs work just fine in Vuetify:
var app = new Vue({
el: '#app',
template: '#main',
vuetify: new Vuetify(),
data:
{
dlgVisible: false,
header:
[
{
value: 'fname',
text: 'First Name' ,
class: 'font-weight-bold text-subtitle-1',
},
{
value: 'lname',
text: 'Last Name' ,
class: 'font-weight-bold text-subtitle-1',
},
{
value: 'salary',
text: 'Salary' ,
class: 'font-weight-bold text-subtitle-1',
},
],
rows:
[
{
fname: 'John',
lname: 'Doe',
salary: 1000
},
{
fname: 'John',
lname: 'Doe',
salary: 1000
},
{
fname: 'John',
lname: 'Doe',
salary: 1000
},
],
},
});
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
</div>
<template id="main">
<v-app>
<v-btn color="primary" #click="dlgVisible = true">Show dialog</v-btn>
<v-dialog v-model="dlgVisible">
<v-card>
<v-card-title class="primary white--text py-2">Dialog</v-card-title>
<v-card-text>
<v-data-table :items="rows" :headers="header">
</v-data-table>
</v-card-text>
<v-card-actions class="justify-center">
<v-btn color="primary" #click="dlgVisible = false">Close</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-app>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue#2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
I have a v-data-table that already has the :search and :sort-by enabled. I have now created a select where I pull in my status from VueX. Accepted, Rejected. What I want to do is not only search or sort but when selecting from the drop down, accepted only the accepted values display in the table.
<v-select
v-model="selectStatus"
label="Status"
:items="statusData"
item-value="id"
item-text="name"
return-object
#change="filterStatus"
/>
Is this the correct way to setup the filter?
methods: {
filterStatus () {
console.log('This is where I am planning to add my custom filter')
}
}
This is my statusData:
userStatus : [
{
id: 0,
name: "Accepted",
},
{
id: 1,
name: " Rejected",
},
];
Or better to pass in the data:
{ text: 'Status', value: 'status.name', filter: value => {}},
To disable certain values to be selected add a disabled property to your items.
var app = new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
items: [{
id: 0,
name: 'Accepted'
},
{
id: 1,
name: ' Rejected',
disabled: true
}
],
value: null
}
})
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-container>
Value : {{value}}
<v-select
v-model="value"
label="Status"
:items="items"
item-value="id"
item-text="name"
return-object
/>
</v-container>
</v-app>
</div>
Documentation : props-disabled
<div
v-if="!item.editNickname"
#click="item.editNickname=true, item.tmpNickname=item.nickname"
>{{item.nickname}}</div>
<v-text-field
v-model="item.tmpNickname"
v-if="item.editNickname||!item.nickname"
outlined
dense
hide-details
single-line
v-on:keyup.enter="saveNickname(item)"
/>
Here is my code.
I want to edit nickname in data table.
If user click nickname(div), text field will show up.
But this code cannot bind instantly(Actually value is binded correct, but UI is not react).
Can I make UI react without other action?
=====================================================
+INFO
This code block is in 'v-data-table' which basic component of vuetify.
The item is an Object.
You can do as below, I'm thinking tmpNickname is not one of the property that you are binding to the data table. See below for the sample code.
You can find the working code here
Template Code:
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1"
>
<template v-slot:item.nickname="{ item }">
<div v-if="!item.editable" #click="item.editable = true; item['tmpnickname'] = item.nickname">{{ item.nickname }}</div>
<v-text-field
v-model="item['tmpnickname']"
v-if="item.editable"
outlined
dense
hide-details
single-line
v-on:keyup.enter="saveNickname(item)"
/>
</template>
</v-data-table>
</v-app>
</div>
Script Code:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{
text: 'Col 1',
value: 'name',
},
{ text: 'Nick name', value: 'nickname' }
],
desserts: [
{
name: 'Row 1',
nickname: 'Name 1',
editable: false
},
{
name: 'Row 2',
nickname: 'Name 2',
editable: false
},
{
name: 'Row 3',
nickname: 'Name 3',
editable: false
}
],
}
},
methods: {
saveNickname (item) {
item.editable = false;
item.nickname = item.tmpnickname;
}
},
})
I use v-select form where based on the item I pick I want to change two values at the same time.
Now I would like to do it this way but its not really possible as of now:
<v-select
:items="mapSelector"
item-text="text"
item-value1="valueA"
item-value2="valueB"
v-model1="data_plot[0].x"
v-model2-"data_plot[0].y"
></v-select>
Here is the list I connected to the select form:
mapSelector: [
{text: "A1", valueA: [3,2,3,4,1,2], valueB: [1]},
{text: "B2", valueB: [1,10,15,4,3,1], valueB:[2]}
],
data_plot that should be updated depending on the value that is selected looks like this:
data_plot: [{
x: [],
y: []}]
So for example when I select "A1" on the selector data_plot is updated accordingly:
data_plot: [{
x:[3,2,3,4,1,2],
y:[1] }]
So the question is: is there any way to use this and change two different values at the same time using v-model?
In this case a watcher is useful.
Let me show:
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: {
selected: '',
mapSelector: [{
text: "A1",
valueA: [3, 2, 3, 4, 1, 2],
valueB: [1]
},
{
text: "B2",
valueA: [1, 10, 15, 4, 3, 1],
valueB: [2]
}
],
data_plot: [{
x: [],
y: []
}]
},
watch: {
selected(newVal) {
this.data_plot[0].x = newVal.valueA
this.data_plot[0].y = newVal.valueB
}
}
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/#mdi/font#4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.js"></script>
<div id="app">
<v-app>
<v-container>
<v-row>
<v-col>
<v-select :items="mapSelector" v-model="selected" return-object>
</v-select>
</v-col>
</v-row>
<v-row>
<v-col>
data_plot[0].x: {{ data_plot[0].x }}<br /> data_plot[0].y: {{ data_plot[0].y }}<br />
</v-col>
</v-row>
</v-container>
</v-app>
</div>
The watcher reacts to changes in the selected data property, and sets the other data.
The only trick is that Vuetify's v-select requires the return-object prop.
Although a bit magical, v-model is essentially syntax sugar for
updating data on user input events, plus special care for some edge
cases.
...
v-model internally uses different properties and emits different
events for different input elements:
text and textarea elements use value property and input event;
checkboxes and radiobuttons use checked property and change event;
select fields use value as a prop and change as an event.
Source: https://v2.vuejs.org/v2/guide/forms.html
That's why you cannot have two v-models on an element: it's nothing else than an oninput and a value prop on input fields/selects/etc.
https://v2.vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Property
i think u should have a look at computed property or watcher.
If u can make the question much more clearer would be more helpful
v-model1="data[0].x"
v-model2-"data[0].y"
This is wrong,and inside component data do you have an array data ?
<div class="value">
<select class="form-control" :required="true" v-model="value">
<option
v-for="option in mapSelector"
v-bind:value="option.text"
:key="option.id"
:selected="option.text == value"
>{{ option.text }}</option
>
</select>
</div>
new Vue({
el: "#app",
data: {
value: '',
variable:[] // which u need to change
},
watch: {
value(newVal) {
if(this.value == 'A1')
this.variable.push(10) // u can do ur stuff here
if(this.value == 'B1')
this.variable.push(10111) // u can do ur stuff here
}
}
})
I am using vue-select component from Vue Select Library in my html form as shown below and I want to display three value in the label but don't know how to achieve that. i couldn't found any solution in the documentation.
I want to display three value in the label as shown below.
<v-select id="selected_item" name="selected_item" title="Select an item" :options="formfieldsdata.items" :reduce="item_name => item_name.id" label="item_name+'::'+item_code+'::'+item_created_at" v-model="item.selected_item" #input="getSelectedItem" style="width: 100%; height:56px;" />
HTML:
<script src="{{ asset('assets/requiredjs/vue-select.js') }}"></script>
<link href="{{ asset('assets/requiredcss/vue-select.css') }}" rel="stylesheet">
<v-select id="selected_item" name="selected_item" title="Select an item" :options="formfieldsdata.items" :reduce="item_name => item_name.id" label="item_name" v-model="item.selected_item" #input="getSelectedItem" style="width: 100%; height:56px;" />
JS:
Vue.component('v-select', VueSelect.VueSelect);
var app = new Vue({
el: '#app',
data: {
formfieldsdata: {
items: [],
},
item: {
selected_item: 0,
},
}
});
Ref to vue select library documentation: https://vue-select.org/guide/values.html#transforming-selections
Just use template literals, what allow embed expressions in JavaScript strings. And make the label binded :label
<v-select id="selected_item" name="selected_item" title="Select an item" :options="formfieldsdata.items" :reduce="item_name => item_name.id" :label="`${item_name} ${item_code} ${item_created_at}" v-model="item.selected_item`" #input="getSelectedItem" style="width: 100%; height:56px;" />
Update
label can use only for one object property. But you can use scopes for options and selected values. Example on codepen
<v-select id="selected_item" name="selected_item" title="Select an item" :options="formfieldsdata.items" :reduce="item_name => item_name.id" v-model="item.selected_item" #input="getSelectedItem" style="width: 100%; height:56px;" >
<template slot="option" slot-scope="option">
<span :class="option.icon"></span>
{{ option.item_name }} {{option.item_code}} {{option.created_at}}
</template>
<template slot="selected-option" slot-scope="option">
<span :class="option.icon"></span>
{{ option.item_name }} {{option.item_code}} {{option.created_at}}
</template>
</v-select>
Update 2
Multi properties search vue-select
vue-component
<div id="app">
<h1>Vue Select - Multiple properties</h1>
<v-select :options="options" label="item_data"
v-model="selected">
</v-select>
</div>
vue-code
Vue.component('v-select', VueSelect.VueSelect)
new Vue({
el: '#app',
data: {
options: [
{
title: 'Read the Docs',
icon: 'fa-book',
url: 'https://codeclimate.com/github/sagalbot/vue-select'
},
{
title: 'View on GitHub',
icon: 'fa-github',
url: 'https://codeclimate.com/github/sagalbot/vue-select'
},
{
title: 'View on NPM',
icon: 'fa-database',
url: 'https://codeclimate.com/github/sagalbot/vue-select'
},
{
title: 'View Codepen Examples',
icon: 'fa-pencil',
url: 'https://codeclimate.com/github/sagalbot/vue-select'
}
]
}
})