单击 v-data-tables 中的 v-btn 时未显示 v-dialog
Posted
技术标签:
【中文标题】单击 v-data-tables 中的 v-btn 时未显示 v-dialog【英文标题】:v-dialog not showing upon clicking the v-btn inside v-data-tables 【发布时间】:2019-11-17 06:08:02 【问题描述】:我是 vuejs 的新手,我正在使用 vuetify。我只想在单击 v-data-table 内的按钮时显示一个对话框。这是我到目前为止所做的。
https://codepen.io/iskaryote1/pen/GbYjZJ?&editable=true&editors=101
v-dialog
<v-dialog v-model="dialog" persistent max->
<template v-slot:activator=" on ">
<v-btn color="primary" dark v-on="on">Open Dialog</v-btn>
</template>
<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" flat @click="dialog = false">Disagree</v-btn>
<v-btn color="green darken-1" flat @click="dialog = false">Agree</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
每次单击按钮时,我的浏览器都会挂起,并且控制台日志显示 递归过多
提前致谢。
【问题讨论】:
【参考方案1】:只需将对话框模式放在表格之外,然后用一个简单的按钮以编程方式打开它:
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="desserts"
class="elevation-1">
<template v-slot:items="props">
<td> props.item.name </td>
<td class="text-xs-right"> props.item.calories </td>
<td class="text-xs-right"> props.item.fat </td>
<td class="text-xs-right"> props.item.carbs </td>
<td class="text-xs-right"> props.item.protein </td>
<td class="text-xs-right"> props.item.iron </td>
<td>
<v-btn color="primary" dark @click="dialog = true">Open Dialog</v-btn>
</td>
</template>
</v-data-table>
<v-dialog v-model="dialog" persistent max->
<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" flat @click="dialog = false">Disagree</v-btn>
<v-btn color="green darken-1" flat @click="dialog = false">Agree</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</v-app>
</div>
【讨论】:
它工作,但你知道为什么我的另一个不工作吗?【参考方案2】:递归是 vuetify 试图在插槽中的插槽中打开一个插槽...看起来您的模板插槽本身每次打开时都会自行打开。
我建议您阅读this answer,其中详细解释了v-slot:activator
的使用。
【讨论】:
我也试过不使用激活器codepen.io/pen/?&editable=true&editors=101,但得到的结果相同。你能告诉我如何解决这个问题吗? 你的链接是空的 哎呀抱歉。这是链接codepen.io/iskaryote1/pen/ydRVwL以上是关于单击 v-data-tables 中的 v-btn 时未显示 v-dialog的主要内容,如果未能解决你的问题,请参考以下文章
如何清除 v-data-table 中的选定行,Vuetify