小编Mar*_*sky的帖子

突出显示 Vuetify 数据表（v-data-table 组件）中列中的某些值的最简单方法是什么。

例如，我们在第一个示例中说： https: //vuetifyjs.com/en/components/data-tables

如何自动将卡路里列中大于 300 的值设置为粗体和红色？

如果我有一个带有vuetify对话框的vue模板（但实际上是任何对话框），如何使用它来确认在vue-router的beforeRouteLeave方法中导航离开该页面？

dialogTest.vue：

<template>
    <v-container>
        <v-layout>
            <v-dialog v-model="dialog" max-width="290" ref="popup">
                <v-card>
                    <v-card-title class="headline">Are you sure you wish to leave this page?</v-card-title>
                    <v-card-text>Better think long and hard.</v-card-text>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="primary darken-1" flat="flat" @click.native="dialog = false">Nah</v-btn>
                        <v-btn color="primary darken-1" flat="flat" @click.native="dialog = false">Yah</v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
        </v-layout>
    </v-container>
</template>

<script src="./dialogTest.ts"></script>

dialogTest.ts：

import Vue from 'vue';
import { Component } from 'vue-property-decorator';

Component.registerHooks([
    'beforeRouteLeave'
]);

@Component
export default class DialogTestComponent extends Vue {

    dialog: boolean = false;

    beforeRouteLeave(to: Object, from: Object, next: …