質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Q&A

0回答

1339閲覧

v-data-table の親コンポーネントから slot の情報を渡したい

leather_wa

総合スコア0

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

0グッド

0クリップ

投稿2020/10/16 08:14

前提・実現したいこと

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問