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

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

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

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

Vuetify.js

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

Q&A

0回答

1493閲覧

Vuetify(2.1.0) にて、v-iconが表示されない

Takabun

総合スコア13

Vue.js

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

Vuetify.js

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

0グッド

3クリップ

投稿2019/10/26 01:58

掲題の通りです。

下記Addresses.vue内、v-slotで囲っている範囲内の
<v-icon small class="mr-2">edit</v-icon>
が表示されない理由が分からず、皆様の知恵をお借りしたい次第で御座います…

#####Addresses.vue

<v-data-table :headers='headers' :items='addresses'> <template v-slot:items="props"> <td class="text-xs-left">{{ props.item.name }}</td> <td class="text-xs-left">{{ props.item.tel }}</td> <td class="text-xs-left">{{ props.item.email }}</td> <td class="text-xs-left">{{ props.item.address }}</td> <td class="text-xs-left"> <span> <router-link :to="{ name: 'address_edit', params: { address_id: props.item.id }}"> <v-icon small class="mr-2">edit</v-icon> </router-link> </span> </td> </template> </v-data-table>

また、試しにv-slotの外に<v-icon small>edit</v-icon>を置いたところ、問題なく表示されましたので、恐らくv-slotの中に入れている事に原因があるのかと考えております。

念の為、iconsに関して記載のあるvuetify.jsも下記にて記載いたします。

#####src/plugins/vuetify.js

import Vue from 'vue'; import Vuetify from 'vuetify/lib'; Vue.use(Vuetify); export default new Vuetify({ icons: { iconfont: 'mdi', }, });

もしかしたら原因は、Vuetifyの2.1.0へのアップデートに起因するものかもしれません…
どうか皆さまよりお力添え頂きたく、宜しくお願いいたします。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問