Develop Reference

v-menu close before v-list-item onclick is seen

I have the following menu setup with vue and vuetify:
<div id="app">
<v-app id="inspire">
<div class="text-center">
<v-menu>
<template v-slot:activator="{ on }">
<v-btn
v-on="on"
>
Click me
</v-btn>
</template>
<v-list>
<v-list-item v-if="!t"
#click="t=!t">
<v-list-item-title>Option 1</v-list-item-title>
</v-list-item>
<v-list-item v-if="t"
#click="t=!t">
<v-list-item-title>Option 2</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
</v-app>
</div>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: {
t: false
},
})
After clicking the menu open, and clicking "Option 1", I intend for the menu to close, and the subsequent menu open to show "Option 2". This happens, but the transition from "Option 1" to "Option 2" is seen during the menu close (gif example below). The intention is to not see the transition occur while the menu is closing. (No transition in the list until menu exits)

You can wrap the list items in a transition-group:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({ t: false })
})
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
<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><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">
<div id="app">
<v-app id="inspire">
<div class="text-center">
<v-menu>
<template v-slot:activator="{ on }">
<v-btn v-on="on">Click me</v-btn>
</template>
<transition-group tag="v-list" name="fade">
<v-list-item v-if="!t" #click="t=!t" key="1">
<v-list-item-title>Option 1</v-list-item-title>
</v-list-item>
<v-list-item v-else #click="t=!t" key="2">
<v-list-item-title>Option 2</v-list-item-title>
</v-list-item>
</transition-group>
</v-menu>
</div>
</v-app>
</div>

Vuetify - How to change v-img source with setTimeout function

I have a problem with my code:
<v-card class="d-flex flex-column">
<v-img id="image" src="w3schools.com/js/landscape.jpg" height="600"> <v-card-title class="headline">
Search for
<v-spacer></v-spacer>
<span class="caption font-italic font-weight-light">yes</span>
</v-card-title>
</v-img>
</v-card>
<script>
setTimeout(function() { document.getElementById("image").setAttribute("src", "w3schools.com/js/smiley.gif"); }, 5000); </script>
It is not changing the image. What seems to be the problem?

It's not recommended to manipulate DOM as you're doing, try to create a data property called url and change it where you want, for example set the setTimeout in the created hook as follows:
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
url: 'https://www.w3schools.com/js/landscape.jpg',
}
},
created(){
setTimeout(()=>{
this.url="https://www.w3schools.com/js/smiley.gif"},5000)
}
})
<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">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<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-content>
<v-container>
<v-card class="d-flex flex-column"> <v-img id="image" :src="url" height="600"> <v-card-title class="headline"> Search for <v-spacer></v-spacer> <span class="caption font-italic font-weight-light">yes</span> </v-card-title> </v-img> </v-card>
</v-container>
</v-content>
</v-app>
</div>

How to append the value from <v-select> when value changed to the label of it's respective <v-file-input> | Vuetify

i'm a beginner here. I'm creating a vuefity form with three <v-file-input> each having one <v-select> option retrospectively.
i would like to append the value from <v-select> when value changed to the label of it's respective <v-file-input>.
Please help me, solve this problem. CodePen : https://codepen.io/jx46/full/pooMwQp
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
items: ['one', 'two', 'three']
})
})
<!DOCTYPE html>
<html>
<head>
<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">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-content>
<v-container>
<v-form>
<v-row>
<v-col>
<v-select :items="items" label="Standard"></v-select>
</v-col>
<v-col>
<v-file-input label="File input"></v-file-input>
</v-col>
</v-row>
<v-row>
<v-col>
<v-select :items="items" label="Standard"></v-select>
</v-col>
<v-col>
<v-file-input label="File input"></v-file-input>
</v-col>
</v-row>
<v-row>
<v-col>
<v-select :items="items" label="Standard"></v-select>
</v-col>
<v-col>
<v-file-input label="File input"></v-file-input>
</v-col>
</v-row>
</v-form>
</v-container>
</v-content>
</v-app>
</div>
<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>
</body>
</html>

You must define data for each pair (v-select- v-input). Then bind it as v-model and :label.
Template:
<v-select
v-model="firstSelectValue"
:items="items"
label="Standard"
></v-select>
<v-file-input :label="firstSelectValue"></v-file-input>
JS:
data: () => ({
items: ['one','two','three'],
firstSelectValue: 'File input',
secondSelectValue: 'File input',
thirdSelectValue: 'File input',
})
Changed Codepen: https://codepen.io/RobbyFront/pen/eYYqEBx

Vuetify right align group of buttons

So I have a group of buttons that I'd like to be on the right side of the page, but justify-end/justify='end' is not working on v-row.
<!DOCTYPE html>
<html>
<head>
<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#3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-container>
<v-form>
<v-row justify='end'>
<v-col>
<v-btn>Button 1</v-btn>
<v-btn>Button 1</v-btn>
<v-btn>Button 1</v-btn>
</v-col>
</v-row>
</v-form>
</v-container>
</v-app>
</div>
<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>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
</script>
</body>
I've looked at this question, but using text align seems hacky, and I'm wondering if there is a better solution?

Add the text-right class to <v-col>:
<v-col class="text-right">
<v-btn>Button 1</v-btn>
<v-btn>Button 2</v-btn>
<v-btn>Button 3</v-btn>
</v-col>

Without changing the grid system try to add <spacer/> component in order to put v-col to the end of row like :
<!DOCTYPE html>
<html>
<head>
<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#3.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-container tag="div">
<v-form>
<v-row justify="end">
<spacer/>
<v-col>
<v-btn>Button 1</v-btn>
<v-btn>Button 1</v-btn>
<v-btn>Button 1</v-btn>
</v-col>
</v-row>
</v-form>
</v-container>
</v-app>
</div>
<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>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
</script>
</body>

You have to use justify-end in a class on a v-row to get it to work. You can't use it on a v-col. DOCS: https://vuetifyjs.com/en/api/v-row/ You may need to play around with the spacing depending on where you put them but you can use the class to do that to avoid any styles.
<v-form>
<v-row class="justify-end">
<v-btn class="mr-2">Button 1</v-btn>
<v-btn class="mr-2">Button 1</v-btn>
<v-btn class="mr-2">Button 1</v-btn>
</v-row>
</v-form>

Make vuetify dropdown menu overflow drawer

I am having problem with vuetify dropdown menu, when I add just drop down and scroll down, content from menu goes up with page on scroll.
On github I found attach as answer but now it stays under drawer side like this:
Vue.use(Vuetify);
new Vue({
el: "#app",
data: {
model: true,
},
methods: {
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.1/vuetify.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.1/vuetify.min.js"></script>
<div id="app">
<v-navigation-drawer v-model="model" fixed app style="background: red;" width="100">
<v-menu :close-on-content-click="false" offset-y attach>
<v-btn slot="activator">Menu</v-btn>
<v-card>
<v-card-text style="overflow-y:auto; max-height:300px;">
<v-list>
<v-list-tile avatar>
<v-list-tile-avatar>
<img src="" alt="John">
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title>John some</v-list-tile-title>
<v-list-tile-sub-title>body</v-list-tile-sub-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn icon small>
<v-icon>remove_red_eye</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
<v-divider></v-divider>
</v-list>
</v-card-text>
</v-card>
</v-menu>
</v-navigation-drawer>
</div>