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
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'm trying to make my image draggable in another application like google or another site would do. For example if I drop an image from google to a Word document, it will copy the link of it and some web applications would show the image instead; the behavior depends on the app.
But the problem is my v-img doesn't even print the link, it just does nothing.
Here is my code:
<v-card v-if="chunk.length >= i">
<template v-if="activeTab === 'Comments'">
<v-card-title class="justify-center">{{ chunk[i-1] }}</v-card-title>
</template>
<template v-else-if="activeTab === 'Images'">
<v-img
:src="getImgUrl(chunk[i-1])"
width="500"
contain
draggable="true"
/>
</template>
<v-card-actions>
<v-col>
<v-btn
color="#138ed3"
block
dark
>
Share
</v-btn>
</v-col>
<v-col>
<v-btn
color="#ffcd00"
block
dark
>
Save
</v-btn>
</v-col>
</v-card-actions>
</v-card>
As you can see I already tried the "draggable" option but it doesn't help.
Is there something I'm missing ?
The problem with v-img is that it renders the image as background (using the CSS style background-image) rather than as an IMG tag. Apparently, CSS backgrounds do not support dragging.
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>
I have a Vuetify dialog that I am displaying when the page loads, actually a second or so after so that the animation displays to reveal the modal dialog. The dialog has some text and an image. Problem is, the dialog displays, then the text pops in and after a delay (while the image downloads) the image then displays and the dialog expands to it's proper size.
How can I get the image to load into memory and be available before the dialog displays? I want the appearance to be a single smooth transition. Right now it comes in in chunks.
<template>
<div>
<v-dialog v-model="dialog" eager persistent max-width="500">
<v-card>
<v-card-title class="headline green lighten-2 white--text" primary-title>
<h3>Congratulations!</h3>
</v-card-title>
<v-card-text>
<div class="mt-4 mx-0 headline font-italic font-weight-bold green--text">
You just received a
<span class="text-no-wrap">pay raise!</span>
</div>
<div class="mt-2 mb-3 subtitle-1">Your Pay-Per-Mile has just increased.</div>
<v-row align="center" justify="center">
<v-img
src="#/assets/Thank-you-notes-for-job-well-done.jpg"
max-height="440"
max-width="450"
></v-img>
</v-row>
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="green" text #click="stop()">Keep it coming</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</template>
...
setTimeout(() => {
this.dialog = true;
}, 2000);
Turns out to have been much easier than I thought. It felt like the image was defaulting to lazy loading, which apparently it does. all I had to do was at the eager property to the image and now the image loads as part of the entire dialog.
This should be a simple fix but not sure where to start.
I have..
<template>
<div class="mx-5 mb-5 Weapons">
<h1 class="green--text">Weapons</h1>
<v-container class="my-5">
<v-layout row wrap>
<v-flex xs12 s6 m4 lg3 v-for="weapon in assaultrifles" :key="weapon.weapontype">
<v-card class="text-md-center ma-3 black">
<v-responsive class="pt-4">
<v-img contain :src="weapon.images"></v-img>
</v-responsive>
<v-card-title class="justify-center">
<div class="heading font-weight-black white--text">{{ weapon.WeaponType}}</div>
</v-card-title>
<v-card-actions class="justify-center">
<v-btn flat class="green black--text ma-3">View Weapons</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
I then have data in arrays with images and "titles" for these cards. I have about 8 cards , each representing its own "category" which is represented by the "title" data in my array.
What I am trying to do is make it so if I click on a card with the category/title "Handgun" or click on a card "rifle", I will be routed to a new page where I list out items for that specific category.. however I am not sure where to start because I am simply passing {{weapon.WeaponType}} into 1 card object, and then using 1 button ( with the text "view weapon"), across all the cards.
My understanding is that if I make a route for the 1 button I made, then the route will be the same for all buttons, despite the cards representing its own category, which would be bad because I don't want to see "handguns" when I click on the "shotgun" card’s button.
I want to somehow keep my current structure ( using 1 object and passing a loop of data ) and 1 btn, so that my code stays around the same length/structure).
Thanks for reading.
You will need additional property in your objects - for the route of the button:
<v-btn
flat
class="green black--text ma-3"
:to="weapon.route"
>
View Weapons
</v-btn>
The weapon.route can be a string or an object.
Another option is to provide just the category IDs and then
<v-btn
flat
class="green black--text ma-3"
:to="{name: 'weaponItems', params: {categoryID: weapon.categoryID}}"
>
View Weapons
</v-btn>