Vuetify」タグアーカイブ

Vuetifyのボタンにnuxt-linkをつくる

HTML

<template v-slot:item.actions="{ item }">
    <v-btn :to="`desserts/${item.id}`" nuxt icon>
        <v-icon small>mdi-pencil</v-icon>
    </v-btn>
</template>

解説

:to
<v-btn>に、Vue Routerのリンクをつくるには、:toスロットを使う
上の例では、/dessets/_id.vueへのリンクを生成している。(_idの部分は、${item.id}が自動的に置換される)

nuxt
nuxt-linkを有効にする

icon
icon表示型のボタンを生成する

Please follow and like us:

VuetifyのDataTableの列幅を指定する

DataTableの列幅は、slotで流し込むheadersの中で指定できる。

HTML

<v-data-table :headers="headers" :items="itemlist">

JavaScript

data() {
    return {
        headers: [
            { text: "ColA", value: "cola", width: "10%" },
            { text: "ColB", value: "colb", width: "80%" },
            { text: "ColC", value: "cols", width: "10%" },
        ],
    }
}

ここでは、%で指定しているが、ピクセルでも指定できるらしい。レスポンシブを考えると、%の方が良いかもしれない。

Via! https://sugimotonote.com/2019/03/12/post-1336/

Please follow and like us: