前提・実現したいこと
vuetify の v-data-table で、似たようなテーブルなんども作成しないようにするため、
子コンポーネントと親コンポーネントに分けて、作成したいです。
ただ、テーブルによってセルの内容が微妙に異なることがあり、親側からセルの内容を指定したいと思っています。
発生している問題・エラーメッセージ
サンプルとして、以下のコンポーネントを作成しました。
このとき、parent で指定した <template v-slot:...</template>
までが表示されませんでした。
同部分を my-table の slot 部にコピペすると、削除アイコンが表示されました。
子コンポーネントにはどのようにtemplate以下の部分を伝えればよいでしょうか?
parent
1<template> 2 <my-table 3 :headers="headers" 4 :items="items" 5 > 6 <template v-slot:[`item.actions`]="{ item }"> 7 <v-icon>mdi-delete</v-icon> 8 </template> 9 </my-table> 10</template> 11 12<script> 13export default { 14 data() { 15 return { 16 headers: [ 17 { text: "名前", value: "name" }, 18 { text: "削除", value: "actions", sortable: false }, 19 ], 20 items: [ 21 { name: "foo" }, { name: "bar" }, 22 ] 23 } 24 }, 25} 26</script>
mytable
1<template> 2 <v-data-table 3 :headers="headers" 4 :items="items" 5 > 6 <slot></slot> 7 </v-data-table> 8</template> 9 10<script> 11export default { 12 props: { 13 headers:{}, 14 items: {} 15 } 16} 17</script>
あなたの回答
tips
プレビュー