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

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

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

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuetify.js

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

Q&A

0回答

780閲覧

v-forを使ってリンク付きボタンを出力したいが、アイコン表示・URL設定ができない

noliiiiii

総合スコア13

Vue.js

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

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuetify.js

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

0グッド

0クリップ

投稿2021/06/04 16:37

Nuxt.jsとVue.jsを勉強し始めたのですが、ちょっと詰まってしまったので、ご回答頂けましたら幸いです。

v-forを使い、テキストとリンクを別々に管理しながらSNSアイコンを横並びで表示させたいのですが、DOMではbuttonとaタグは出力されており、ホバーすると何かがあることはわかるものの、指定したアイコン・リンクらが共に設定できません。

vue

1<template> 2 <v-app id="app"> 3 <v-card class="overflow-hidden"> 4 <v-app-bar 5 absolute 6 color="#6A76AB" 7 dark 8 shrink-on-scroll 9 prominent 10 src="https://picsum.photos/1920/1080?random" 11 fade-img-on-scroll 12 scroll-target="#scrolling-techniques-4" 13 > 14 <template #img="{ props }"> 15 <v-img 16 v-bind="props" 17 gradient="to top right, rgba(100,115,201,.7), rgba(25,32,72,.7)" 18 ></v-img> 19 </template> 20 21 <v-app-bar-nav-icon></v-app-bar-nav-icon> 22 23 <v-toolbar-title> 24 Norika's Test Project for Nuxt.js n Vuetify 25 </v-toolbar-title> 26 27 <v-spacer></v-spacer> 28 29 <v-btn icon> 30 <v-icon>mdi-magnify</v-icon> 31 </v-btn> 32 33 <v-btn icon> 34 <v-icon>mdi-heart</v-icon> 35 </v-btn> 36 37 <v-menu bottom left> 38 <template #activator="{ on, attrs }"> 39 <v-btn icon color="yellow" v-bind="attrs" v-on="on"> 40 <v-icon>mdi-dots-vertical</v-icon> 41 </v-btn> 42 </template> 43 44 <v-list> 45 <v-list-item v-for="(item, i) in items" :key="i"> 46 <v-list-item-title>{{ item.title }}</v-list-item-title> 47 </v-list-item> 48 </v-list> 49 </v-menu> 50 </v-app-bar> 51 <v-sheet 52 id="scrolling-techniques-4" 53 class="overflow-y-auto" 54 max-height="600" 55 > 56 <v-container style="height: 150px"></v-container> 57 <Nuxt /> 58 <v-container style="height: 1000px"></v-container> 59 </v-sheet> 60 </v-card> 61 62 <v-footer padless> 63 <v-card width="100%" class="indigo lighten-1 white--text text-center"> 64 <v-card-text> 65 <v-btn 66 v-for="(icon, index) in icons" 67 :key="index" 68 class="mx-4 white--text" 69 icon 70 > 71 <a :href="icons.url" target="_blank"> 72 <v-icon size="24px"> 73 {{ icons.icon }} 74 </v-icon> 75 </a> 76 </v-btn> 77 </v-card-text> 78 79 <v-divider></v-divider> 80 81 <v-card-text class="white--text"> 82 {{ new Date().getFullYear() }} — <strong>Vuetify</strong> 83 </v-card-text> 84 </v-card> 85 </v-footer> 86 </v-app> 87</template> 88 89<script> 90export default { 91 data() { 92 return { 93 icons: [ 94 { 95 icon: 'mdi-facebook', 96 url: 'https://www.facebook.com/', 97 }, 98 { 99 icon: 'mdi-twitter', 100 url: 'https://twitter.com/', 101 }, 102 { 103 icon: 'mdi-instagram', 104 url: 'https://www.instagram.com/', 105 }, 106 ], 107 clipped: false, 108 drawer: false, 109 fixed: false, 110 items: [ 111 { 112 icon: 'mdi-apps', 113 title: 'Welcome', 114 to: '/', 115 }, 116 { 117 icon: 'mdi-chart-bubble', 118 title: 'Inspire', 119 to: '/inspire', 120 }, 121 ], 122 miniVariant: false, 123 right: true, 124 rightDrawer: false, 125 title: 'Vuetify.js', 126 } 127 }, 128} 129</script> 130

言葉足らずかとは存じますが、以上、よろしくお願い致します。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問