I am continuing to use vuetify for my small personal project to study vue and vuetify well, i am using v-col and v-img to create a gallery of images and i would like to click on each image to go to full screen (in style lightbox) but it seems that vuetify doesn't have this native capability, is it possible? it seems strange that there is not. Can anyone suggest me a solution? Sorry maybe the silly question but as said i'm a beginner
I am attaching the code
<template>
<div class="gallery">
<h1 class="subtitle-1 grey--text pa-2 d-flex justify-center">Galleria</h1>
<v-divider></v-divider>
<v-container class="my-5">
<div>
<v-row>
<v-col v-for="item in items" :key="item.id" class="d-flex child-flex" cols="4" >
<v-img :src="item.src" contain class="grey lighten-2">
<template v-slot:placeholder>
<v-row class="fill-height ma-0" align="center" justify="center">
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
</v-row>
</template>
</v-img>
</v-col>
</v-row>
</div>
</v-container>
</div>
</template>
<script>
// # is an alias to /src
export default {
name: 'Gallery',
data(){
return {
items: [
{id: 1, src: require("../assets/images/img1.jpg")},
{id: 2, src: require("../assets/images/img2.jpg")},
{id: 3, src: require("../assets/images/img3.jpg")},
{id: 4, src: require("../assets/images/img4.jpg")},
{id: 5, src: require("../assets/images/img5.jpg")},
{id: 6, src: require("../assets/images/img6.jpg")},
{id: 7, src: require("../assets/images/img7.jpg")},
{id: 8, src: require("../assets/images/img8.jpg")},
]
}
}
}
</script>
I thing v-overlay component is exactly what you need. Just put v-img or simple img with correct src attribute inside of it.
You could toggle the fullscreen onClick #click="toggleFullscreen(element)" on your img, but you would need to provide the Element e.g. by Ref or Id. An example toggle method:
toggleFullscreen(element) {
if (document.fullscreenElement) {
return document.exitFullscreen() // exit fullscreen on next click
}
if (element.requestFullscreen) {
element.requestFullscreen()
} else if (this.element.webkitRequestFullscreen) {
element.webkitRequestFullscreen() // Safari
} else if (this.element.msRequestFullscreen) {
element.msRequestFullscreen() // IE11
}
}
References: https://www.w3schools.com/jsref/met_element_requestfullscreen.asp, https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen
Related
Expected Behavior: 1. On initial render, the component should auto open the corresponding v-list-item's subgroup. 2. Then, on clicking an adjacent subgroup item, the nav drawer should remain opened to the subgroup the user has click on.
Problem: When performing 2, the entire nav drawer will close rather than the expected behavior.
I still need to keep the :value v-binds, but I believe the problem has something to do with preventing the #activator from propagating v-on when clicking an item.
Oddity: Any subsequent clicks on nav drawer items will result in normal behavior after experiencing the initial problem.
Any help would be appreciated if you've come across this problem before. Thank you!
<template>
<div>
<v-app>
<v-list>
<v-list-group
v-for="(subObjects, fruit) in items"
:key="fruit"
:value="fruit === 'orange'"
no-action
>
<template #activator>
<v-list-item-title>
{{ fruit }}
</v-list-item-title>
</template>
<template>
<v-list-group
v-for="object in subObjects"
:key="object.name"
:value="object.name === 'navel'"
no-action
sub-group
>
<template #activator>
<v-list-item-content>
<v-list-item-title>
{{ object.name }}
</v-list-item-title>
</v-list-item-content>
</template>
<v-list-item
v-for="year in object.dates"
:key="year"
>
<template #activator="{ on, attrs }">
<v-list-item-title v-bind="attrs" v-on="on">
{{ year }}
</v-list-item-title>
</template>
</v-list-item>
</v-list-group>
</template>
</v-list-group>
</v-list>
</v-app>
</div>
</template>
<script>
export default {
data() {
return {
items: {
apples: {
0: {
color: 'red',
name: 'fuji',
dates: ['2016', '2018'],
},
1: {
color: 'green',
name: 'granny smith',
dates: ['2020', '2021'],
}
},
oranges: {
0: {
color: 'orange',
name: 'navel',
dates: ['2022']
},
1: {
color: 'red orange',
name: 'blood orange',
dates: ['2015', '2017'],
}
},
}
};
},
};
</script>
Created a code pen where when the user enters text in the first v-autocomplete the dropdown menu for the second v-autocomplete appears. I did with by changing isFocused to true. The issue is the cursor moves to the next v-autocomplete. Is there a way to stop this or another way to show the dropdown menu for the second v-autocomplete?
Here is my code pen
https://codepen.io/aaronk488/pen/MWbKNOq?editors=1010
HTML
<div id="app">
<v-app>
<v-container >
<v-row >
<v-col cols="4" md="4">
<v-autocomplete
ref="autocomplete"
label="Autocomplete"
:items="components"
:search-input.sync="search"
hint="need to open menu on focus, just like click" persistent-hint
></v-autocomplete>
</v-col>
<v-col cols="4" md="4">
<v-autocomplete
ref="autocomplete2"
label="Autocomplete2"
:items="components2"
hint="need to open menu on focus, just like click this" persistent-hint
></v-autocomplete>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
JS
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: {
search: null,
components: [
'Autocompletes', 'Comboboxes', 'Forms', 'Inputs', 'Overflow Buttons', 'Selects', 'Selection Controls', 'Sliders', 'Textareas', 'Text Fields',
],
components2: [
'Autocompletes2', 'Comboboxes2', 'Forms2', 'Inputs2', 'Overflow Buttons2', 'Selects2', 'Selection Controls2', 'Sliders2', 'Textareas2', 'Text Fields2',
],
},
watch: {
search(){
this.$refs.autocomplete2.isMenuActive = true;
this.$refs.autocomplete2.isFocused = true;
}
},
})
Image
Well, you could use one autocomplete and one select.
But there you go, set this code to search(val) method. I think this is what you searching for.
this.$refs.autocomplete2.$refs.menu.isActive = true;
this.$refs.autocomplete2.blur();
Live example
Hi and good day everyone.
How to display a list of image by using v-for method in Vue js?
If I have a code like this:
<v-flex>
<h4>{{$translate('bz_doc_path')}}</h4>
<p><a :href="business_doc_path">{{business_doc_path}}</a></p>
<v-img
:src="business_doc_path"
max-width="50%"
max-height="auto"
/>
</v-flex>
data component:
<script>
export default {
data(){
return {
business_doc_path: this.props.business_doc_path
}
},
props:[
'props'
],
computed:{
r(){
return this.props
},
}
}
</script>
You can have the v-for directive on the v-flex component. v-for requires a list or object (iterable) and also a key. See docs https://v2.vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for
<v-flex v-for="item in items" :key="item.id">
<h4>{{$translate(item['bz_doc_path'])}}</h4>
<p><a :href="item['business_doc_path']">{{item['business_doc_path']}}</a></p>
<v-img
:src="item['business_doc_path']"
max-width="50%"
max-height="auto"
/>
</v-flex>
I am trying to create a user list in which the user selects their icon from a row of icons. They activate a modal, enter their information, and select 'add user'. I am having trouble getting the value of the icon clicked, as you can see below I use this.icons[0] which will console log. But I cannot successfully get them to dynamically log. In addition I cannot successfully add the icon to the person (even in the case of calling the index, as stated above. What would be the best/cleanest way to do this? I cleaned out the code a bunch, but this should give a solid understanding of such. If I can provide any further code or info, let me know. Thanks in advance!
<template>
<div>
<v-expansion-panel v-for="user in users" :key="user.name" class="mb-1">
<v-expansion-panel-content>
<div slot="header" class="flex-row">
<v-icon>{{user.icon}}</v-icon>
<span class="px-1">{{user.name}}</span>
<span class="px-1">{{user.age}}</span>
</div>
</v-expansion-panel-content>
</v-expansion-panel>
<v-dialog max-width="600px" v-model="dialog">
<v-btn fab slot="activator" class="primary mb-3">
<v-icon>fa-user-plus</v-icon>
</v-btn>
<v-card>
<v-card-title>
<h2>Add a New User</h2>
</v-card-title>
<v-card-text>
<v-form class="px-3" ref="form">
<v-text-field label="Name" v-model="user.name" prepend-icon="person"></v-text-field>
<v-text-field label="Age" v-model="user.age" prepend-icon="fa-heart"></v-text-field>
<div>
<v-btn flat icon v-for="(icon, index ) in icons" :key="index" #click="appendIcon()">
<v-icon>{{icon}}</v-icon>
</v-btn>
</div>
<v-btn
flat
class="primary mx-0 mt-3"
#click="addUser(user);
dialog=!dialog"
>Add user</v-btn>
</v-form>
</v-card-text>
</v-card>
</v-dialog>
</div>
</template>
<script>
export default {
methods: {
addUser: function(user) {
this.users.push(user);
this.user = {
name: undefined,
age: undefined,
icon: undefined,
};
console.log(user.name + " added to list");
},
appendIcon: function() {
console.log(this.icons[0]);
}
},
data() {
return {
dialog = fa
users: [],
user: {
name: undefined,
age: undefined,
icon: undefined,
},
icons: [
"fas fa-user",
"far fa-user",
"fas fa-user-cog",
]
};
}
};
</script>
In your buttons for your icons array if you add the individual icon as a parameter you can assign that to your user object. Like so:
#click="appendIcon(icon)"
and the method:
appendIcon(icon) {
this.user.icon = icon
console.log(icon);
}
Then when you call addUser() you can use the already set user object, so you don't need to pass that as a parameter.
#click="addUser";
and that method:
addUser() {
this.users.push(this.user);
this.user = {
name: undefined,
age: undefined,
icon: undefined,
};
console.log(user.name + " added to list");
},
I'm using VueJS with the VuetifyJS material design components. How to position the Vuetify popover component below the MORE button? (Currently it's positioned on the upper left, I guess it's the fall back x=0, y=0.)
Button:
<button #click.prevent="openPopover">MORE</button>
Popover Vuetify template:
<template>
<div class="text-xs-center">
<v-menu
offset-x
:close-on-content-click="false"
:nudge-width="200"
v-model="menu"
>
<v-btn color="indigo" dark slot="activator">Menu as Popover</v-btn>
<v-card>
<v-list>
<v-list-tile-action>
<v-btn
icon
:class="fav ? 'red--text' : ''"
#click="fav = !fav"
>
<v-icon>favorite</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
</v-list>
</v-menu>
</div>
</template>
JS:
<script>
export default {
data: () => ({
fav: true,
menu: false,
message: false,
hints: true
})
}
</script>
I fixed the problem by putting the popover code in a drop down menu.
There are also a couple of options in the API to position the content of the menu.
Examples and API: https://vuetifyjs.com/en/components/menus