How can i open a v-dialog outside of a template? - javascript

How can i open a dialog outside of the template?
<v-dialog v-model="dialog_elimina_richiesta" activator="dialog_elimina_richiesta" persistent>
<v-card>
<v-card-title class="headline">Use Google's location service?</v-card-title>
<v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" text #click="dialog_elimina_richiesta = false">Disagree</v-btn>
<v-btn color="green darken-1" text #click="dialog_elimina_richiesta = false">Agree</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<template v-slot:item.data_richiesta="{ item }">{{item.data_richiesta | formatDate}}</template>
<template v-slot:item.actions="{ item }">
<v-icon medium class="mr-2" color="purple" #click="editAttivita(item)">mdi-pencil</v-icon>
<v-icon
medium
class="mr-2"
color="red"
#click="detailDeleterichiesta(item)"
>mdi-delete</v-icon>
</template>
and there is my function which should open the dialog, and i don't know why it doesn't work, the property dialog_elimina_richiesta should be accessible from everywhere using this.property, and with the dialog that has the v-model on that property i can't get why it doesn't work
detailDeleterichiesta(item){
this.dialog_elimina_richiesta=true;
console.log(item);
},

Please find the below code where the dialog is opened outside the template.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
dialog: false
}
},
methods: {
openDialog: function() {
this.dialog = true
}
}
})
<!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#5.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 id="inspire">
<v-row justify="center">
<v-btn color="primary" dark #click.stop="openDialog">
Open Dialog
</v-btn>
<v-dialog v-model="dialog" max-width="290">
<v-card>
<v-card-title class="headline">User Data?</v-card-title>
<v-card-text>
Data </v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green darken-1" text #click="dialog = false">
Disagree
</v-btn>
<v-btn color="green darken-1" text #click="dialog = false">
Agree
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-row>
</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>

Related

How to avoid #click on only one child component

For example if I click on all the v-card I am redirecting to an other link BUT if I click on the title World of the Day and only on the title I don't want to do nothing. How to avoid to be redirected when clicking on title ?
template>
<v-card
class="mx-auto"
max-width="344"
#click="goToAnOtherLink"
>
<v-card-text>
<div>Word of the Day</div>
<p class="display-1 text--primary">
be•nev•o•lent
</p>
<p>adjective</p>
<div class="text--primary">
well meaning and kindly.<br>
"a benevolent smile"
</div>
</v-card-text>
<v-card-actions>
<v-btn
text
color="deep-purple accent-4"
>
Learn More
</v-btn>
</v-card-actions>
</v-card>
</template>
If it's only the title, use the stop event modifier. This is easier than having the logic in the method.
<v-app>
<v-card class="mx-auto" max-width="344" #click="goToAnOtherLink">
<v-card-text>
<div class="title" #click.stop>Word of the Day</div>
<p class="display-1 text--primary"> be•nev•o•lent </p>
<p>adjective</p>
<div class="text--primary"> well meaning and kindly.<br> "a benevolent smile" </div>
</v-card-text>
<v-card-actions>
<v-btn text color="deep-purple accent-4"> Learn More </v-btn>
</v-card-actions>
</v-card>
</v-app>
https://codeply.com/p/2ExpE6PF6F
Add a class to the title div as well, and check the classes of your event's target inside the function goToAnOtherLink. Then you can use stopPropagation() along with the custom code you have in that function.
new Vue({
el: "#app",
data() {},
methods: {
goToAnOtherLink(e) {
if (e.target.classList.contains("title") || e.target.classList.contains("display-1")) {
e.stopPropagation()
console.log("Cancelled Navigation!")
} else {
console.log("Navigated!")
}
}
}
});
<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 href="https://cdn.jsdelivr.net/npm/vuetify#1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<div id="app">
<v-app>
<v-card class="mx-auto" max-width="344" #click="goToAnOtherLink">
<v-card-text>
<div class="title">Word of the Day</div>
<p class="display-1 text--primary">
be•nev•o•lent
</p>
<p>adjective</p>
<div class="text--primary">
well meaning and kindly.<br> "a benevolent smile"
</div>
</v-card-text>
<v-card-actions>
<v-btn text color="deep-purple accent-4">
Learn More
</v-btn>
</v-card-actions>
</v-card>
</v-app>
</div>
You can wrap your v-card in a div and use absolute positioning to place the title; so that the title is in "front" of the v-card thus clicking on it does nothing.
Pseudo-code
<div>
<span>Word of the day</span> <!-- use absolute to position inside the div -->
<v-card></v-card>
</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

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>

How to get Navigation drawer clipped under dialog toolbar Vuetifyjs + Vuejs

I'm trying to get the navigation drawer clipped below the dialog toolbar.
The vuetify manual shows how this works using clipped under a normal toolbar but not with dialog. Recreated issue on: Code pen as well
I tried using fixed property or get it out of the card as well it does not work.
Wondering how else to get it work.
Vuetifyjs: 1.0.5
Vuejs: 2.5.9
new Vue({
el: '#app',
data () {
return {
dialog: null,
notifications: false,
sound: true,
widgets: false
}
}
})
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-btn primary dark v-on:click.stop="dialog = true">Open Dialog</v-btn>
{{dialog}}
<v-dialog v-model="dialog" transition="dialog-bottom-transition" width="80%">
<v-card>
<v-toolbar dark class="primary">
<v-btn icon #click.native="dialog = false" dark>
<v-icon>close</v-icon>
</v-btn>
<v-toolbar-title>Settings</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-btn dark flat #click.native="dialog = false">Save</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-navigation-drawer
temporary
absolute
clipped
right
width=""
height=""
>
<v-list light one-line class="grey pa-1">
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title class="white--text subheading">
HEADER
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-list class="pt-0" dense>
<v-divider></v-divider>
<v-list-tile >
<v-icon color="grey">remove</v-icon> Lorem ipsum lorem ipsum
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-card-media src="https://vuetifyjs.com/static/doc-images/cards/desert.jpg" height="200px">
</v-card-media>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">Kangaroo Valley Safari</h3>
<div>Located two hours south of Sydney in the <br>Southern Highlands of New South Wales, ...</div>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat class="orange--text">Share</v-btn>
<v-btn flat class="orange--text">Explore</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-app>
</div>
Clipped failed to work but it can be clipped under the dialog tool bar with some inline style. Applied class ='mt-5' and style='top: 16px' to get the desired result.
Codepen
new Vue({
el: '#app',
data () {
return {
dialog: null,
notifications: false,
sound: true,
widgets: false
}
}
})
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify/dist/vuetify.min.js"></script>
<div id="app">
<v-app id="inspire">
<v-btn primary dark v-on:click.stop="dialog = true">Open Dialog</v-btn>
{{dialog}}
<v-dialog v-model="dialog" transition="dialog-bottom-transition" width="80%">
<v-card>
<v-toolbar dark class="primary">
<v-btn icon #click.native="dialog = false" dark>
<v-icon>close</v-icon>
</v-btn>
<v-toolbar-title>Settings</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items>
<v-btn dark flat #click.native="dialog = false">Save</v-btn>
</v-toolbar-items>
</v-toolbar>
<v-navigation-drawer
temporary
absolute
right
width=""
height=""
class='mt-5'
style='top: 16px'
>
<v-list light one-line class="grey pa-1">
<v-list-tile>
<v-list-tile-content>
<v-list-tile-title class="white--text subheading">
HEADER
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<v-list class="pt-0" dense>
<v-divider></v-divider>
<v-list-tile >
<v-icon color="grey">remove</v-icon> Lorem ipsum lorem ipsum
</v-list-tile>
</v-list>
</v-navigation-drawer>
<v-card-media src="https://vuetifyjs.com/static/doc-images/cards/desert.jpg" height="200px">
</v-card-media>
<v-card-title primary-title>
<div>
<h3 class="headline mb-0">Kangaroo Valley Safari</h3>
<div>Located two hours south of Sydney in the <br>Southern Highlands of New South Wales, ...</div>
</div>
</v-card-title>
<v-card-actions>
<v-btn flat class="orange--text">Share</v-btn>
<v-btn flat class="orange--text">Explore</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-app>
</div>

VUE / VUETIFY - Auto-adjust height adding or removing items from list component "v-list-tile"

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)

Categories

Resources