I'am using vuetify and i want make auto complete like the one on their official site.
But i'm faces some issues :
The items value not appear in the return list and i don't know how to make appear the links.
Here is my code.
Thanks You
<template>
<v-app>
<v-app-bar app color="primary" dark>
<v-app-bar-nav-icon #click="drawer = true"></v-app-bar-nav-icon>
<v-toolbar-title> Board </v-toolbar-title>
<v-spacer></v-spacer>
<v-autocomplete
:loading="loading"
:filter="v => v"
:items="items"
:search-input.sync="search"
v-model="select"
flat hide-no-data hide-details return-object placeholder="Search ...">
<v-list-tile
slot="prepend-item"
class="grey--text">
{{ items.length }} menus found
</v-list-tile>
<template slot="selection" slot-scope="{ item }">
{{item.name}} {{item.url}}
</template>
<template slot="item" slot-scope="{ item }">
<v-list-tile-content>
<p class='fullName'>{{item.name}} {{item.url}}</p>
</v-list-tile-content>
</template>
</v-autocomplete>
</v-app-bar>
<v-main>
<HelloWorld/>
</v-main>
</v-app>
I went through your issue and try to make a codepen and it worked.
My suggestion is that you should consider data structure when you use object with auto complete and it 's needed even you use v-select.
Please check this pen. https://codepen.io/endmaster0809/pen/qBZRywZ
items: [
{
name: 'Alerts',
url: 'https://vuetifyjs.com/en/components/alerts/'
},
{
name: 'Autocompletes',
url: 'https://vuetifyjs.com/en/components/autocompletes/#autocompletes'
}
],
select: {
name: 'Alerts',
url: 'https://vuetifyjs.com/en/components/alerts/'
},
Related
I've made a custom datatable component, where my Table.vue file is shown below:
<template>
<div>
<v-data-table
:headers="headers"
:items="items"
:search="search"
:loading="loading"
loading-text="Loading... Please wait"
dense
>
<template v-slot:top>
<v-toolbar dark flat dense>
<v-toolbar-title>{{ title }}</v-toolbar-title>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
></v-text-field>
<v-spacer></v-spacer>
</v-toolbar>
</template>
</v-data-table>
</div>
</template>
<script>
export default {
name: "Table",
props: [
"headers",
"items",
"title",
"itemsPerPage",
"loading",
],
data: function () {
return {
search: '',
}
},
methods: {
},
};
</script>
And I'm using it like that:
<Table
:headers="headers"
:items="groups"
:loading="loading"
title="Baseny"
>
</Table>
Everything is fine, but I want to add custom columns with actions for every input (every input has different ID)
Normally (without a custom component) I'd use the following code:
<v-data-table
:headers="headers"
:items="times"
:items-per-page="5"
:search="search"
:loading="loading"
loading-text="Ładowanie... Proszę czekać"
>
<template v-slot:top>
<v-toolbar dark flat dense>
<v-toolbar-title>Lista zajęć</v-toolbar-title>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Szukaj"
single-line
hide-details
></v-text-field>
<v-spacer></v-spacer>
<v-btn
color="primary"
:to="{ name: 'admin.times.create' }"
>
Dodaj zajęcie
</v-btn>
</v-toolbar>
</template>
<template v-slot:item.actions="{ item }">
<v-icon
small
class="mr-2"
#click="show(item)"
>
mdi-pool
</v-icon>
<v-icon
small
class="mr-2"
#click="edit(item)"
>
mdi-pencil
</v-icon>
</template>
</v-data-table>
I'm using this v-slot:
<template v-slot:item.actions="{ item }">
<v-icon
small
class="mr-2"
#click="show(item)"
>
mdi-pool
</v-icon>
<v-icon
small
class="mr-2"
#click="edit(item)"
>
mdi-pencil
</v-icon>
</template>
However, when I wrote the custom reusable table components it didn't work when I put these lines into tag.
How can I use my custom components properly in this scenario?
What you want to achieve is I believe a wrapper component. You want to wrap a component on top of another one to let him have some custom properties that you want to reuse in your application.
What you need is a small snippet that will allow your slots to be used:
<!-- pass through scoped slots -->
<template v-for="(_, scopedSlotName) in $scopedSlots" v-slot:[scopedSlotName]="slotData">
<slot :name="scopedSlotName" v-bind="slotData" />
</template>
<!-- pass through normal slots -->
<template v-for="(_, slotName) in $slots" v-slot:[slotName]>
<slot :name="slotName" />
</template>
You can find the source of this here
Basically, here how you can rewrite your CustomTable.vue:
<template>
<div>
<v-data-table
v-bind="$attrs"
v-on="$listeners"
:search="search"
loading-text="Loading... Please wait"
dense
>
<!-- pass through scoped slots -->
<template
v-for="(_, scopedSlotName) in $scopedSlots"
v-slot:[scopedSlotName]="slotData"
>
<slot :name="scopedSlotName" v-bind="slotData" />
</template>
<!-- pass through normal slots -->
<template v-for="(_, slotName) in $slots" v-slot:[slotName]>
<slot :name="slotName" />
</template>
<template v-slot:top>
<v-toolbar dark flat dense>
<v-toolbar-title>{{ title }}</v-toolbar-title>
<v-spacer></v-spacer>
<v-text-field
v-model="search"
append-icon="mdi-magnify"
label="Search"
single-line
hide-details
></v-text-field>
<v-spacer></v-spacer>
</v-toolbar>
</template>
</v-data-table>
</div>
</template>
<script>
export default {
name: "CustomTable",
props: ["title"],
data: function () {
return {
search: "",
};
},
methods: {},
};
</script>
I made a codesandbox to show you how it works:
https://codesandbox.io/s/vuetify-2-forked-3lp9y?file=/src/components/CustomTable.vue
I also added automatic attribute and listeners bindings on your table, to allow you to use all the features that Vuetify provides.
I'm pretty new to Vue/Vuetify. I'm working on select option for a site I'm working on, and I want to use an icon as the label as opposed to text. I want to do something like the image below, but I'm not sure if it's even possible. Any guidance would be appreciated.
Thanks!
HTML
<div id="app">
<v-app class="container">
<v-select
v-model="select"
:items="permissions"
label="Select"
item-text="name"
>
<template v-slot:item="slotProps" >
<i :class="['mr-2', 'mdi', slotProps.item.flag]"></i>
{{slotProps.item.name}}
</template>
</v-select>
</v-app>
</div>
VUEJS
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
select: null,
permissions: [
{
name: "Global",
flag: "mdi-earth"
},
{
name: "Private",
flag: "mdi-lock"
}
],
}
})
you can use vuetify selection slot for v-select and show the icon of the selected item instead of test.
something like this:
<template>
<v-container fluid>
<v-select
v-model="value"
:items="items"
label="Select Item"
multiple
>
<template #selection="{ item }">
<v-icon> {{ getItemIcon(item) }} </v-icon>
</template>
</v-select>
</v-container>
</template>
and you need to write the getItemIcon method as to return the icon based on the text.
For some reason my side it does not work as I wanted - the icon to be inside the selection text and when selected, to show it. Therefore, I added another template as follows:
<template>
<v-container fluid>
<v-select
v-model="value"
:items="items"
label="Select Item"
>
<template v-slot:item="{ item }">
<v-icon> {{ getItemIcon(item) }} </v-icon>
</template>
<template #selection="{ item }">
<v-icon> {{ getItemIcon(item) }} </v-icon>
</template>
</v-select>
</v-container>
</template>
If someone knows easier way to do so, I will be happy to see it, because, currently I have a repeatable code for the .
How to use v-tooltip inside v-menu activator with vuetify 2.0? Previously it was working using slot="activator".
That's what I'm trying to combine:
<v-menu>
<template v-slot:activator="{on}">
<v-btn v-on="on">Menu Trigger</v-btn>
</template>
...list with menu options...
</v-menu>
and
<v-tooltip v-slot:activator="{on}">
<v-btn v-on="on">Menu Trigger with Tooltip</v-btn>
<span>Tooltip Content</span>
</v-tooltip>
Now I try to paste v-tooltip inside v-menu, what should happen with {on} here?
I think you're most likely unsure about the "conflicted" on objects passed to the template by multiple activator slots and how to apply all of the event handlers on the target element(s).
If that's the case, you can workaround this by assigning either one (or both) of them to a variable with a different name (see: assigning to new variable names), and then destructure and "restructure", which basically glues them back together (or merge them, technically speaking).
<v-menu>
<template #activator="{ on: onMenu }">
<v-btn v-on="onMenu">Menu Trigger</v-btn>
<v-tooltip bottom>
<template #activator="{ on: onTooltip }">
<v-btn v-on="{ ...onMenu, ...onTooltip }">Menu Trigger with Tooltip</v-btn>
</template>
<span>Tooltip Content</span>
</v-tooltip>
</template>
<!-- ...list with menu options... -->
</v-menu>
Or, use the slot props directly. Just make sure to name them properly so they won't introduce another naming conflict with the component's data and/or props.
<v-menu>
<template #activator="menu">
<v-btn v-on="menu.on">Menu Trigger</v-btn>
<v-tooltip bottom>
<template #activator="tooltip">
<v-btn v-on="{ ...menu.on, ...tooltip.on }">Menu Trigger with Tooltip</v-btn>
</template>
<span>Tooltip Content</span>
</v-tooltip>
</template>
<!-- ...list with menu options... -->
</v-menu>
Complete Demo:
new Vue({
el: '#app',
data: () => ({
items: [
{ title: 'Item #1' },
{ title: 'Item #2' },
{ title: 'Item #3' }
]
})
})
<link href="https://fonts.googleapis.com/css?family=Roboto:400|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#1.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#1.x/dist/vuetify.js"></script>
<div id="app">
<v-menu>
<template #activator="{ on: onMenu }">
<v-btn v-on="onMenu">Menu Trigger</v-btn>
<v-tooltip bottom>
<template #activator="{ on: onTooltip }">
<v-btn v-on="{ ...onMenu, ...onTooltip }">Menu Trigger with Tooltip</v-btn>
</template>
<span>Tooltip Content</span>
</v-tooltip>
</template>
<v-list>
<v-list-tile
v-for="(item, index) in items" :key="index"
#click.prevent>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</div>
I'm using a Vue.js project setup with Nuxt and Vuetify.js.
I'm trying to add FontAwesome icons as v-btns to lead the user to an Instagram page.
Unfortunately when clicking the icon, the browser is directed to http://localhost:3000/https://www.instagram.com/therock/?hl=en instead of just https://www.instagram.com/therock/?hl=en as expected. The Instagram account URL is tacked onto the end of the base URL.
Here's the template portion of the Vue file:
<template>
<v-app>
<v-toolbar app flat color="rgb(249, 249, 249)">
<router-link to="/" class="toolbar-title">
<v-toolbar-title>Chumiest Bucket</v-toolbar-title>
</router-link>
<v-spacer></v-spacer>
<v-toolbar-items class="hidden-sm-and-down">
<v-btn
v-for="(item, index) in items"
:key="index"
:to="item.path"
flat
>{{ item.name }}</v-btn>
<v-btn flat :to="instagram.path">
<font-awesome-icon :icon="instagram.icon"/>
</v-btn>
</v-toolbar-items>
<v-menu class="hidden-md-and-up">
<v-toolbar-side-icon slot="activator"></v-toolbar-side-icon>
<v-list>
<v-list-item v-for="(item, index) in items" :key="index">
<v-btn :to="item.path" flat>{{ item.name }}</v-btn>
</v-list-item>
<v-btn flat :to="instagram.path">
<font-awesome-icon :icon="instagram.icon"/>
</v-btn>
</v-list>
</v-menu>
</v-toolbar>
<v-content style="padding-top: 19px;">
<v-container>
<nuxt />
</v-container>
</v-content>
<v-footer app style="position: absolute;">
<span style="font-size: 8pt;">© 2019 Chumiest Bucket</span>
</v-footer>
</v-app>
</template>
here's the script portion of the Vue file:
<script>
export default {
name: 'app',
data() {
return {
fixed: false,
items: [
{
name: 'About',
path: '/about'
},
{
name: 'Stuff',
path: '/stuff'
}
],
instagram: {
icon: ['fab', 'instagram'],
path: 'https://www.instagram.com/therock/?hl=en'
},
}
}
}
</script>
The "to" prop is used for navigating to pages within your routes. See documentation here. To navigate to external links, Bind the url to href instead.
<a :href="instagram.path">
{{ url }}
</a>
Hi I am learning vuetify and I want to change the background of a navigation drawer that I imported from vuetify default layout template.
The tamplate was found and imported on official vuetify docs.
The problem is I am unable to change the background of the drawer and set it to image
This is the Default layout with drawer
<template>
<v-app
id="inspire"
dark
>
<v-navigation-drawer
v-model="drawer"
fixed
clipped
app
>
<v-list dense>
<v-list-tile v-for="item in items" :key="item.text" #click="">
<v-list-tile-action>
<v-icon>{{ item.icon }}</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title>
{{ item.text }}
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-subheader class="mt-3 grey--text text--darken-1">SUBSCRIPTIONS</v-subheader>
<v-list>
<v-list-tile v-for="item in items2" :key="item.text" avatar #click="">
<v-list-tile-avatar>
<img :src="`https://randomuser.me/api/portraits/men/${item.picture}.jpg`" alt="">
</v-list-tile-avatar>
<v-list-tile-title v-text="item.text"></v-list-tile-title>
</v-list-tile>
</v-list>
<v-list-tile class="mt-3" #click="">
<v-list-tile-action>
<v-icon color="grey darken-1">add_circle_outline</v-icon>
</v-list-tile-action>
<v-list-tile-title class="grey--text text--darken-1">Browse Channels</v-list-tile-title>
</v-list-tile>
<v-list-tile #click="">
<v-list-tile-action>
<v-icon color="grey darken-1">settings</v-icon>
</v-list-tile-action>
<v-list-tile-title class="grey--text text--darken-1">Manage Subscriptions</v-list-tile-title>
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-toolbar
color="red"
dense
fixed
clipped-left
app
>
<v-toolbar-side-icon #click.stop="drawer = !drawer"></v-toolbar-side-icon>
<v-icon class="mx-3">fab fa-youtube</v-icon>
<v-toolbar-title class="mr-5 align-center">
<span class="title">Youtube</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-layout row align-center style="max-width: 650px">
<v-text-field
:append-icon-cb="() => {}"
placeholder="Search..."
single-line
append-icon="search"
color="white"
hide-details
></v-text-field>
</v-layout>
</v-toolbar>
<v-content>
<v-container fill-height>
<v-layout justify-center align-center>
<v-flex shrink>
<v-tooltip right>
<template v-slot:activator="{ on }">
<v-btn :href="source" icon large target="_blank" v-on="on">
<v-icon large>code</v-icon>
</v-btn>
</template>
<span>Source</span>
</v-tooltip>
<v-tooltip right>
<template v-slot:activator="{ on }">
<v-btn icon large href="https://codepen.io/johnjleider/pen/YeRKwQ" target="_blank" v-on="on">
<v-icon large>mdi-codepen</v-icon>
</v-btn>
</template>
<span>Codepen</span>
</v-tooltip>
</v-flex>
</v-layout>
</v-container>
</v-content>
</v-app>
</template>
<script>
export default {
data: () => ({
drawer: null,
items: [
{ icon: 'trending_up', text: 'Most Popular' },
{ icon: 'subscriptions', text: 'Subscriptions' },
{ icon: 'history', text: 'History' },
{ icon: 'featured_play_list', text: 'Playlists' },
{ icon: 'watch_later', text: 'Watch Later' }
],
items2: [
{ picture: 28, text: 'Joseph' },
{ picture: 38, text: 'Apple' },
{ picture: 48, text: 'Xbox Ahoy' },
{ picture: 58, text: 'Nokia' },
{ picture: 78, text: 'MKBHD' }
]
}),
props: {
source: String
}
}
</script>
I am expecting apply the background image to drawer, example : https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg
I tried to use in my drawer src atribute :
<v-navigation-drawer
v-model="drawer"
fixed
clipped
app
src="https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg"
>
But that is not working, also I tried wrapping drawer in Div and accessing the class with scoped css but without any success.
There is a backgrounds ready component for drawers at official vuetify codepen : https://codepen.io/pen/?&editable=true&editors=101
that shows using src atribute.
But for some reason it is not working with this example.
Vuetify v1
Codepen
src property does not exist in v1 Navigation drawer
docs, so probably the way to go is just put v-img with 100% height inside the drawer:
<v-navigation-drawer>
<v-img
src="https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg"
height="100%"
>
Vuetify v2
Codepen
In Vuetify v2 Navigation drawer
docs it has src property, so it works like so:
<v-navigation-drawer src="https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg">