掲題の通りです。
下記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へのアップデートに起因するものかもしれません…
どうか皆さまよりお力添え頂きたく、宜しくお願いいたします。
あなたの回答
tips
プレビュー