I have a card which have 2 buttons and I want to have difference function when clicking on:
Card
Button Yes
Button No
I layout the card this way
<v-card
#click.self="$emit('card:clicked')"
>
<v-card-actions>
<v-spacer/>
<v-btn
#click.stop="$emit('btn:yes')"
>
Yes
</v-btn>
<v-btn
#click.stop="$emit('btn:no')"
>
No
</v-btn>
</v-card-actions>
</v-card>
With modifier stop I can emit btn:yes or btn:no event without emit event card:clicked on card, but the clicked animation on card still show and is very confusing.
My question is how I can stop the animation happen like stopping the event card:clicked when I click on the button instead of the card.
After some more search I find out the animation call ripple with vuetify.
With the right words I am able to find the answer at Child and parent ripple triggered
And I can solve my issue by adding #mousedown.stop like below
<v-card
#click.self="$emit('card:clicked')"
>
<v-card-actions>
<v-spacer/>
<v-btn
#click.stop="$emit('btn:yes')"
#mousedown.stop
>
Yes
</v-btn>
<v-btn
#click.stop="$emit('btn:no')"
#mousedown.stop
>
No
</v-btn>
</v-card-actions>
</v-card>
Related
I'm a complete beginner to Vue and I have an extremely basic question that is tripping me up.
I have a Dialog that opens up and asks for user input. When the user clicks okay, it makes a call to an API and tries to add the user input to a database. This works fine and I'm able to successfully hit the database. The issue I'm having is if the API doesn't return a 200. I want to persist the dialog and add text that says "Invalid Input. Try again." However, everything I've tried just closes the dialog automatically.
The code I have looks like:
<v-dialog v-model="show" width="500">
<template v-slot:activator="{ on, attrs }">
<v-btn text color="green" v-bind="attrs" v-on="on"> Add User </v-btn>
</template>
<v-card>
<v-card-title class="text-h5 grey lighten-2"> Add User </v-card-title>
<v-spacer></v-spacer>
<v-card-text>
<v-text-field label="User to add" v-model="addUser"></v-text-field>
</v-card-text>
<!-- <v-card-text v-if="successfullyAdded == false"><strong class="red--text text--lighten-1">Please input a valid username</strong></v-card-text> -->
<v-spacer></v-spacer>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="primary"
text
#click="
show = false
addUser(index)
"
>
Add
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
How do I persist a dialog conditionally such that it stays open if addUser returns False and otherwise closes normally?
I have a text field built right into a vuetify expansion panel.
After clicking the "rename box" icon
The issue is that every time I type a spacebar into the text box the expansion panel toggles. I have prevented the event propagation of a click by using click.stop="" attribute but I cant seem to prevent this space bar event from affecting the parent.
Attributes that I have tested are:
keydown.stop
keydown.prevent ('Cant type with this option')
keydown.self
keydown.capture
input.stop
change.stop
The following are the events emitted according to the vue plugin
Here is the code
<v-expansion-panel
active
v-for="(item, i) in $store.state.data"
:key="i"
>
<v-expansion-panel-header>
<div v-if="editorQ !== i">Q. {{ item.q }}</div>
<v-text-field
v-else
label="Question"
:value="newQuestion"
#click.stop=""
#change.stop="updateQ"
#keydown.stop=""
></v-text-field>
<template v-slot:actions>
<v-btn
v-if="editorQ === i"
#click.stop="doneEditingQuestion(i)"
depressed
icon
text
>
<v-icon> mdi-check </v-icon>
</v-btn>
<v-btn
class="upright"
v-else
#click.stop="editQuestion(i)"
depressed
icon
text
>
<v-icon> mdi-rename-box </v-icon>
</v-btn>
</template>
</v-expansion-panel-header>
<v-expansion-panel-content>
It was just trial and error for me, the following prevents the active toggle:
#click.stop
#keyup.prevent
when applied to the v-text-field within a v-expansion-panel-header.
Codepen
This is a form for logging in. As noted in the black screen, the registration button is small. The question is how can I make the registration button as large as in the white image
This is part of the code for the record button
Register.vue:
<v-layout row>
<v-flex xs12>
<v-btn class="red accent-4 margine color myfont">
Sign up
</v-btn>
</v-flex>
</v-layout>
If you check the Vuetify documentation, you'll find, that in order for the button to extend the full width of its container, you give it the block property.
Like such:
<v-btn class="red accent-4 margine color myfont" block>
Sign up
</v-btn>
You'll find it all in the vuetify documentation
I have a menu dialog inside a table column to update a corresponding value.
The menu dialog when opened shows a card with a select box and update button.
The menu is activated using v-on which works exactly as intended but I have no way of closing the menu.
Since it's inside a table, using a v-model and changing the value causes multiple menus/select boxes to be shown to be opened.
<v-menu :close-on-content-click="false" :close-on-click="false">
<template v-slot:activator="{ on: { click } }">
<v-chip #click="click" small>{{item[header.value]}}</v-chip>
</template>
<v-card>
<!-- <v-card-title class="subtitle-2 pb-0 pt-1">Update Status</v-card-title> -->
<v-select items="Status" class="px-4 pb-2" hide-details label="Status"></v-select>
<v-card-actions>
<!-- <v-spacer></v-spacer> -->
<v-btn color="primary" #click="" text>Update</v-btn>
<v-btn color="warning" text>Cancel</v-btn>
</v-card-actions>
</v-card>
</v-menu>
How can I close the menu without using a v-model?
It was an easy solution...
I added a v-model to the menu dialog and created an object in data display: {}. The v-model on the menu dialog was v-model="display[item.id]" using the item id as an index of sorts and then I could just use a method to close it.
close(id) {
this.display[id] = false;
},
Done.
How can I display to v-dialog the data coming from my database?
<v-row class="albumLayout">
<div v-for="(album, index) in allAlbums" :key="index">
<v-col>
<v-card>
<v-card-title>{{album.ALBUM}}</v-card-title>
<v-btn color="green" style="margin:10px" #click="dialog = !dialog">VIEW ALBUM</v-btn>
<v-btn color="red" style="margin:10px">DELETE ALBUM</v-btn>
<v-dialog v-model="dialog">
<v-card>
<v-card-title>{{album.ALBUM}}</v-card-title>
</v-card>
</v-dialog>
</v-card>
</v-col>
</div>
</v-row>
As of now, it just display the I AM TITLE #3 every time I clicked view album button of each card.
Question is, how can I change this to show titles to each specific card.
Your click handler needs to do 2 things: Set the album and show the dialog.
add selectedAlbum:null to your data
to open the dialog on click, set selectedAlbum = album
set the dialog model to !!selectedAlbum, to only show when album is set
use selectedAlbum instead of album in your dialog
To close set selectedAlbum to null