0

I have a list with cards with some details of a record. When i click on a card i want to start the vuetify dialog and pass the record of the selected card to the dialog to edit the record.

I already tried the solution of Open a Vuetify dialog from a component template in VueJS

But for some reason if i have for instance 3 records when i click by first click it shows the first record and when i click for the second time it shows the second record in the dialog and when i click 3 or more times it shows the third record

The below code works except i now have to show a button on every line. I want it to work by some sort of click event on a card

Parent:

<template>
    <v-container id="translist" v-if="this.transactions">
        <v-layout align-center justify-center row wrap v-for="transaction in transactions" :key="transaction.id" class="mb-2">
            <v-flex xs12>  
                <v-card> 
                    <v-container fluid> 
                        <v-flex xs12 text-xs-right>
                            <app-edit-transaction-dialog :transaction="transaction"></app-edit-transaction-dialog> 
                        </v-flex>
                        <v-layout row >
                            .. some data
                        </v-layout>
                    </v-container>    
                </v-card> 
            </v-flex>  
        </v-layout>
    </v-container>  
</template>

Dialog / child:

<template>
    <v-dialog v-model="dialog" fullscreen transition="dialog-bottom-transition" @keydown.esc="open = false" max-width="600px">
        <template v-slot:activator="{ on }">
        <v-btn flat color="black" class="v-btn--small" dark v-on="on">
            <v-icon small>edit</v-icon>
        </v-btn>

       <v-card>
           <v-card-text>
               <v-form class="px-3" ref="form">
                   <v-text-field 
                    label="Omschrijving" 
                    v-model="editTransaction.description"    
                    prepend-icon="folder"
                    required
                    ></v-text-field>
                </v-form>
            </v-card-text>
        </v-card>
    </v-dialog>
</template>

<script>
    export default {
        props: ['transaction'],
        data () {
            return {
                dialog:false,
                editTransaction:this.transaction,
            }
        }
    }
</script>

i want to click on the card to start the dialog and it shows the record which i clicked on

Globoxrocks
  • 1
  • I'm not totally sure what the structure you're going for is, but if you have multiple cards and one dialog, you might want to do something like in the [question](https://stackoverflow.com/questions/48035310/open-a-vuetify-dialog-from-a-component-template-in-vuejs) you linked, but use Vuex like the answerer suggested. Have a field on the state with the data from the card that needs to be edited. When the user clicks `edit`, emit the `dialog` event and also set that field on the state to the data for that card. Then have the dialog load the data from the state. –  Jul 06 '19 at 05:39
  • Thansk for replying. Just after i strugled for 2 days with this problem and posting my first topic i figured out a solution. I use the eventbus solution (which i mentioned in my question) . When i tried this solution for the first time i had the problem when i had 3 records (cards). When i clicked for the first time it openen one dialog. After the second time 2 dialogs and after third time 2 dialogs. The problem was that i loaded the dialog as a placeholder within the v-for. When i put it above it worked. if someone is interested in the solution i can post it. – Globoxrocks Jul 06 '19 at 09:22
  • Could you post your solution so as to help others with this problem? I was excited to find this post since I'm struggling with an almost identical question, but alas, there is no answer to help me out of my misery – half of a glazier Jan 23 '20 at 07:46

0 Answers0