点击卡片,通过v对话编辑记录

时间:2019-07-05 21:20:47

标签: vue.js

我有一张卡片清单,里面有一些记录的细节。当我单击一张卡片时,我想启动可视化对话框并将所选卡片的记录传递到对话框以编辑记录。

我已经尝试过解决 Open a Vuetify dialog from a component template in VueJS

但是由于某种原因,如果我有3条记录,当我单击第一次单击时,它显示第一条记录;当我第二次单击时,它在对话框中显示第二条记录;当我单击3次或多次时,它显示第二条记录显示第三条记录

下面的代码有效,除了我现在必须在每行上显示一个按钮。我希望它可以通过卡片上的某种点击事件来工作

父母:

<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>

对话框/孩子:

<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>

我想单击该卡以启动对话框,并显示我单击的记录

0 个答案:

没有答案