I'm using the combobox component of VuetifyJS and I need to add an icon in front of every entry in the drop down. How to do that?
Here is a CodePen example of the combobox: https://codepen.io/anon/pen/KBLXYO
HTML
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-layout wrap>
<v-flex xs12>
<v-combobox
v-model="select"
:items="items"
label="Select a favorite activity or create a new one"
></v-combobox>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
JS:
new Vue({
el: '#app',
data () {
return {
select: 'Programming',
items: [
'Programming',
'Design',
'Vue',
'Vuetify'
]
}
}
})
Use the item scoped slot.
<v-combobox
v-model="select"
:items="items"
label="Select a favorite activity or create a new one">
<template slot="item" slot-scope="data">
<v-icon>home</v-icon> {{data.item}}
</template>
</v-combobox>
Here is your pen updated.
FWIW, this is all covered in the documentation.
Related
I am more of a Vue-Noob, and find it to be a bit complicated to understand. Maybe you fellas see that code, and have the "best practice" or most compact solution for my problem:
I have an autocomplete dropdown box. On expand, i see a list with clickable entries. I would need to get the information of the hovered item, if the mouse hovers over the list.
Like, the method "doFunnyStuff" would push the data of the hovered object on hovering to a method, and do something with it (maybe externally or so)
Thank you in advance for any helpful comment!
<template>
<v-autocomplete
v-model="selected"
dense
outlined
hide-details
return-object
background-color="white"
light
:placeholder="placeholder"
hide-no-data
style="width: 500px"
:loading="loading"
:search-input.sync="query"
:items="items"
clearable
>
<template slot="selection" slot-scope="{ item }" return-object>
<v-list-item #mouseenter="doFunnyStuff(item)">
<v-list-item-content>
<v-list-item-title> {{ item.text }}} </v-list-item-title>
</v-list-item-content>
</v-list-item>
</template></v-autocomplete
>
</template>
</template>
Maybe I misunderstood your question, but when you want to do something with hovered item of expanded list, you should use item slot instead of selection.
Selection slot is used just for your selected item on top of the component, so your code works, but only when you hover your already selected item.
Mouseenter event is not related for any component in vuetify, it's an JS event that may be appended to any component (if was not appended before by vuetify or any different library, ofc).
So your code may be like:
<div id="app">
<v-app id="inspire">
<v-autocomplete
v-model="value"
:items="items"
dense
filled
label="Filled"
>
<template #item="{ item, on, attrs }">
<v-list-item #mouseenter="doFunnyStuff(item)" v-on="on" v-bind="attrs">
<v-list-item-content>
<v-list-item-title> {{ item }} </v-list-item-title>
</v-list-item-content>
</v-list-item>
</template>
</v-autocomplete>
<div>
<p>{{ hoveredItem }}</p>
</div>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
items: ['foo', 'bar', 'fizz', 'buzz'],
value: null,
hoveredItem: "not hovered yet"
}),
methods: {
doFunnyStuff (item) {
this.hoveredItem = item;
}
}
})
Codepen link with an example
I am using Vuetify card with a layout and rendering some dynamic vuetify components inside of the card on checkbox selection which renders either a divider, a spacer, toolbar or button but i am not able to figure out how can i make the buttons span the entire width?
Basically the dynamic button should look like the button at the end rendering the entire width.
Please check this codepen.
Please check this working example:-
new Vue({
el: "#app",
data() {
return {
pricing: [{
text: "Actual price:",
value: "$17,000",
},
{
text: " Discount",
value: "$12,345",
}
],
elements: [{
title: "Divider",
value: "v-divider"
},
{
title: "Toolbar",
value: "v-toolbar"
},
{
title: "Button",
value: "v-btn"
}
],
selected: []
};
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.5.14/dist/vuetify.min.js"></script>
<link rel="stylesheet" href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons'>
<link href="https://cdn.jsdelivr.net/npm/vuetify#1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app id="inspire">
<v-container>
<v-layout row>
<v-flex xs6>
<v-card>
<v-card-text>
<v-layout row justify-space-between v-for="option in pricing" :key="option.value" class="my-3">
<span :class="option.class">{{option.text}}</span>
<component v-for="(el, i) in selected" :key="i" :is="el.value"></component>
<span>{{option.value}}</span>
</v-layout>
<v-layout row justify-center>
<v-flex xs11>
<v-btn block>
Request
</v-btn>
</v-flex>
</v-layout>
</v-card-text>
</v-card>
<v-flex v-for="el in elements" :key="el.value">
<v-checkbox :value="el" v-model="selected" :label="el.title">
</v-checkbox>
</v-flex>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
Any help will be appreciated. Thank you so much.
Use .flex.xs12 (12 = flex-basis: 100%;)
-or-
remove xs12 (And add button block attribute = flex: 1 0 auto;).
<!-- block buttons extend the full available width -->
<template>
<v-btn block>
Block Button
</v-btn>
</template>
https://vuetifyjs.com/en/components/buttons/#block
I am trying add the feature to add multiple workers when clicked on Add worker. The issue I am facing here is that when I put workers array inside the management then this feature doesn't work. But if puts workers array outside the management hash then it works. But I want it to be inside the management issue. I am getting the error cannot read the property push.
<div v-for="(worker, index) in management.workers" :key="index">
<v-container fluid>
<v-layout row wrap>
<v-flex xs12 md6 class="add-col-padding-right info-align">
<v-text-field
label='Name'
v-model="worker.name"
>
</v-text-field>
</v-flex>
<v-flex xs12 md6 class="add-col-padding-left info-align">
<v-text-field
label='Hours of work'
v-model="worker.hours_of_work"
>
</v-text-field>
</v-flex>
</v-layout>
<v-btn class="red-button next-btn" #click="deleteRow(index)">Delete</v-btn>
</v-container>
</div>
<v-btn class="red-button next-btn" #click="addRow">Add Workers</v-btn>
<script>
export default {
data () {
return {
management: {
workers: []
}
}
}
methods: {
addRow() {
this.management.workers.push({
name: '',
hours_of_work: '',
total: ''
})
},
deleteRow(index) {
this.management.workers.splice(index,1)
}
}
}
</script>
Code seems to work below:
new Vue({
el: "#app",
vuetify: new Vuetify(),
data() {
return {
management: {
workers: []
}
}
},
methods: {
addRow() {
this.management.workers.push({
name: '',
hours_of_work: '',
total: ''
})
},
deleteRow(index) {
this.management.workers.splice(index, 1)
},
getRows(){
console.clear()
console.log(this.management.workers)
}
}
});
<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.2.20/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.2.20/dist/vuetify.min.js"></script>
<div id="app">
<v-app>
<div v-for="(worker, index) in management.workers" :key="index">
<v-container fluid>
<v-layout row wrap>
<v-flex xs12 md6 class="add-col-padding-right info-align">
<v-text-field label='Name' v-model="worker.name">
</v-text-field>
</v-flex>
<v-flex xs12 md6 class="add-col-padding-left info-align">
<v-text-field label='Hours of work' v-model="worker.hours_of_work">
</v-text-field>
</v-flex>
</v-layout>
<v-btn class="red-button next-btn" #click="deleteRow(index)">Delete</v-btn>
</v-container>
</div>
<v-btn class="red-button next-btn" #click="addRow">Add Workers</v-btn>
<v-btn class="red-button next-btn" #click="getRows">View Workers</v-btn>
</v-app>
</div>
I have a Vuetifyjs Autocomplete. I want to open its menu when user focuses on it using tab key from previous input. Below is the sample code
<div id="app">
<v-app>
<v-container >
<v-row >
<v-col cols="12" md="4">
<v-text-field label="Text Field"/>
</v-col>
<v-col cols="12" md="6">
<v-autocomplete
label="Autocomplete"
:items="components"
hint="need to open menu on focus, just like click" persistent-hint
></v-autocomplete>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
<script>
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: {
components: [
'Autocompletes', 'Comboboxes', 'Forms', 'Inputs', 'Overflow Buttons', 'Selects', 'Selection Controls', 'Sliders', 'Textareas', 'Text Fields',
],
},
methods: {
}
})
</script>
I have also created a pen for this https://codepen.io/salalaslam/pen/YzzPajN
Because vuetify does not have the option you want, you must control it directly.
An input tag exists inside the autocomplete component. Specify focus event directly on this input tag.
Try this.
// template
<v-autocomplete
ref="autocomplete"
label="Autocomplete"
:items="components"
hint="need to open menu on focus, just like click"
persistent-hint
></v-autocomplete>
export default {
mounted () {
let autocompleteInput = this.$refs.autocomplete.$refs.input
autocompleteInput.addEventListener('focus', this.onFocus, true)
},
methods: {
onFocus (e) {
this.$refs.autocomplete.isMenuActive = true // open item list
}
}
}
pen - https://codepen.io/kdydesign/pen/rNNadXN?editors=1111
Instead of digging to the low-level DOM, you can simply use Vue.js's focus() and activateMenu()
<template>
<v-row>
<v-col cols="12" md="4">
<v-text-field label="Text Field" #keydown.tab="focus" />
</v-col>
<v-col cols="12" md="6">
<v-autocomplete
ref="aut"
label="Autocomplete"
:items="components"
hint="need to open menu on focus, just like click"
persistent-hint
></v-autocomplete>
</v-col>
</v-row>
</template>
<script>
export default {
layout: "center-six",
data() {
return {
components: ["A", "B", "C", "D"],
};
},
methods: {
focus() {
this.$refs["aut"].focus();
this.$refs["aut"].activateMenu();
},
},
};
</script>
I have also created a simple codePen VueJs Menu Activator
I created a simple Contact list with an input to add the contact items but after I add a few items it's not resizing.
I used this as an example and there is resizing but not in my code:
https://v2.vuejs.org/v2/guide/list.html
Could anyone help me with that?
Here is the Codepen:
https://codepen.io/fabiozanchi/pen/qoBpgd
Vue.component('contact-item', {
template: '\
<v-list-tile-title>\
<button #click="$emit(\'remove\')"><v-icon class="remove-email-icon" color="red">remove_circle</v-icon></button>\{{ title }}\
</v-list-tile-title>\
',
props: ['title']
})
new Vue({
el: '#contact-list',
data: {
newContact: '',
contacts: [],
nextContactId: 1
},
methods: {
addNewContact: function() {
this.contacts.push({
id: this.nextContactId++,
title: this.newContact
})
this.newContact = ''
}
}
})
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" />
<link rel="stylesheet" type="text/css" href="https://unpkg.com/vuetify#1.0.5/dist/vuetify.min.css" />
<script src="https://unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify#1.0.5/dist/vuetify.min.js"></script>
<div id="contact-list">
<v-app>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-toolbar color="blue" dark>
<v-toolbar-title class="text-xs-center">Contacts</v-toolbar-title>
</v-toolbar>
<v-container>
<v-text-field v-model="newContact" #keyup.enter="addNewContact" placeholder="Add new email contact email"></v-text-field>
</v-container>
<v-divider></v-divider>
<v-list class="resize-list">
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title is="contact-item" v-for="(contact, index) in contacts" :key="contact.id" :title="contact.title" #remove="contacts.splice(index, 1)">
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
</v-card>
</v-flex>
</v-layout>
</v-app>
</div>
Thank you!
Use v-for on v-list-tile component (see vuetify examples).
<v-list-tile
v-for="(contact, index) in contacts"
:key="contact.id"
>
That will produce multiple lis that you want from your examples (currently you only have one li element in list because of v-for on title, so that's why it's not working properly)