Vuetifyの公式サイトには、v-btnをクリックしてv-dialogを開くサンプルが掲載されています。1
ここでは、v-cardをクリックしたときにv-dialogを開くサンプルを作成してみました。
長い文章を小さめのカードで表示するとき、v-cardでは省略形で表示しておき、そこをクリックしたら全文がv-dialogで表示されるようになっています。
サンプル
CodePenで動くサンプルを作ってみました。
なお、元は単一ファイルコンポーネントとして「CardTest」を定義し、それをApp.vueで複数並べる使い方をしていました。
しかし、CodePenではそのままだとうまく動きませんので、propsで定義していたtitleとcontentをdata()に移動させてあります。
See the Pen Vuetify Sample - click card, open dialog by shozzy (@shozzy) on CodePen.
ポイント
data()で定義されているdialogの値が、v-dialog要素のv-model属性にバインディングしてあります。
デフォルトではfalseなのでv-dialogは非表示です。
v-cardの方でクリックイベントを拾い dialog = true にすると、v-dialogが表示される仕掛けです。
単一ファイルコンポーネントのインスタンスごとに状態を持っているので、App内に複数のカードを並べてあっても、正しく各カードの状態を保持できます。
<template>
<div class="cardtest">
<v-card min-width="200px" height="100%" @click.stop="dialog = true">
<v-card-title>{{ title }}</v-card-title>
<v-divider></v-divider>
<v-card-text>{{ shortenedContent }}</v-card-text>
</v-card>
<v-dialog v-model="dialog" scrollable max-width="80%">
<v-card>
<v-card-title>{{ title }}</v-card-title>
<v-divider></v-divider>
<v-card-text height="300px">{{ content }}</v-card-text>
</v-card>
</v-dialog>
</div>
</template>
<script>
export default {
name: 'CardTest',
props: {
title: String,
content: String
},
data(){
return {
dialog: false
}
},
computed: {
shortenedContent: function(){
let maxlength = 100;
if(this.content.length <= maxlength){
return this.content;
}
else{
return this.content.substr(0,maxlength-10)+'...(続きを読む）'
}
}
}
}
</script>