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

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

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

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

ESLint

ESLintは、JavaScriptのための構文チェックツール。全検証ルールを自由に on/offでき、独自のプロジェクトに合わせたカスタムルールを容易に設定することが可能。公開されている様々なプラグインを組み込んで使用することもできます。

Nuxt.js

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

Q&A

解決済

2回答

11133閲覧

Eslintによって吐かれるvue/require-default-propエラーを解決したい。

toshihirokato

総合スコア20

Vue.js

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

ESLint

ESLintは、JavaScriptのための構文チェックツール。全検証ルールを自由に on/offでき、独自のプロジェクトに合わせたカスタムルールを容易に設定することが可能。公開されている様々なプラグインを組み込んで使用することもできます。

Nuxt.js

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

0グッド

0クリップ

投稿2020/01/15 20:46

実現したいこと

現在、Nuxt.jsプロジェクトにてVuetifyのテーマを使用しています。

Githubの内容をそのまま写経したのですが、以下のエラー(warnig)が発生したので、解決したいです。

###発生したエラー

terminal

1 269:5 warning Prop 'source' requires default value to be set vue/require-default-prop

###該当するソースコード

nuxt

1<template> 2 <v-app id="inspire"> 3 <v-navigation-drawer 4 v-model="drawer" 5 :clipped="$vuetify.breakpoint.lgAndUp" 6 app 7 > 8 <v-list dense> 9 <template v-for="item in items"> 10 <v-row 11 v-if="item.heading" 12 :key="item.heading" 13 align="center" 14 > 15 <v-col cols="6"> 16 <v-subheader v-if="item.heading"> 17 {{ item.heading }} 18 </v-subheader> 19 </v-col> 20 <v-col 21 cols="6" 22 class="text-center" 23 > 24 <a 25 href="#!" 26 class="body-2 black--text" 27 >EDIT</a> 28 </v-col> 29 </v-row> 30 <v-list-group 31 v-else-if="item.children" 32 :key="item.text" 33 v-model="item.model" 34 :prepend-icon="item.model ? item.icon : item['icon-alt']" 35 append-icon="" 36 > 37 <template v-slot:activator> 38 <v-list-item-content> 39 <v-list-item-title> 40 {{ item.text }} 41 </v-list-item-title> 42 </v-list-item-content> 43 </template> 44 <v-list-item 45 v-for="(child, i) in item.children" 46 :key="i" 47 link 48 > 49 <v-list-item-action v-if="child.icon"> 50 <v-icon>{{ child.icon }}</v-icon> 51 </v-list-item-action> 52 <v-list-item-content> 53 <v-list-item-title> 54 {{ child.text }} 55 </v-list-item-title> 56 </v-list-item-content> 57 </v-list-item> 58 </v-list-group> 59 <v-list-item 60 v-else 61 :key="item.text" 62 link 63 > 64 <v-list-item-action> 65 <v-icon>{{ item.icon }}</v-icon> 66 </v-list-item-action> 67 <v-list-item-content> 68 <v-list-item-title> 69 {{ item.text }} 70 </v-list-item-title> 71 </v-list-item-content> 72 </v-list-item> 73 </template> 74 </v-list> 75 </v-navigation-drawer> 76 77 <v-app-bar 78 :clipped-left="$vuetify.breakpoint.lgAndUp" 79 app 80 color="blue darken-3" 81 dark 82 > 83 <v-app-bar-nav-icon @click.stop="drawer = !drawer" /> 84 <v-toolbar-title 85 style="width: 300px" 86 class="ml-0 pl-4" 87 > 88 <span class="hidden-sm-and-down">Google Contacts</span> 89 </v-toolbar-title> 90 <v-text-field 91 flat 92 solo-inverted 93 hide-details 94 prepend-inner-icon="mdi-magnify" 95 label="Search" 96 class="hidden-sm-and-down" 97 /> 98 <v-spacer /> 99 <v-btn icon> 100 <v-icon>mdi-apps</v-icon> 101 </v-btn> 102 <v-btn icon> 103 <v-icon>mdi-bell</v-icon> 104 </v-btn> 105 <v-btn 106 icon 107 large 108 > 109 <v-avatar 110 size="32px" 111 item 112 > 113 <v-img 114 src="https://cdn.vuetifyjs.com/images/logos/logo.svg" 115 alt="Vuetify" 116 /> 117 </v-avatar> 118 </v-btn> 119 </v-app-bar> 120 <v-content> 121 <v-container 122 class="fill-height" 123 fluid 124 > 125 <v-row 126 align="center" 127 justify="center" 128 > 129 <v-tooltip right> 130 <template v-slot:activator="{ on }"> 131 <v-btn 132 :href="source" 133 icon 134 large 135 target="_blank" 136 v-on="on" 137 > 138 <v-icon large> 139 mdi-code-tags 140 </v-icon> 141 </v-btn> 142 </template> 143 <span>Source</span> 144 </v-tooltip> 145 <v-tooltip right> 146 <template v-slot:activator="{ on }"> 147 <v-btn 148 icon 149 large 150 href="https://codepen.io/johnjleider/pen/MNYLdL" 151 target="_blank" 152 v-on="on" 153 > 154 <v-icon large> 155 mdi-codepen 156 </v-icon> 157 </v-btn> 158 </template> 159 <span>Codepen</span> 160 </v-tooltip> 161 </v-row> 162 </v-container> 163 </v-content> 164 <v-btn 165 bottom 166 color="pink" 167 dark 168 fab 169 fixed 170 right 171 @click="dialog = !dialog" 172 > 173 <v-icon>mdi-plus</v-icon> 174 </v-btn> 175 <v-dialog 176 v-model="dialog" 177 width="800px" 178 > 179 <v-card> 180 <v-card-title class="grey darken-2"> 181 Create contact 182 </v-card-title> 183 <v-container> 184 <v-row class="mx-2"> 185 <v-col 186 class="align-center justify-space-between" 187 cols="12" 188 > 189 <v-row 190 align="center" 191 class="mr-0" 192 > 193 <v-avatar 194 size="40px" 195 class="mx-3" 196 > 197 <img 198 src="//ssl.gstatic.com/s2/oz/images/sge/grey_silhouette.png" 199 alt="" 200 > 201 </v-avatar> 202 <v-text-field 203 placeholder="Name" 204 /> 205 </v-row> 206 </v-col> 207 <v-col cols="6"> 208 <v-text-field 209 prepend-icon="business" 210 placeholder="Company" 211 /> 212 </v-col> 213 <v-col cols="6"> 214 <v-text-field 215 placeholder="Job title" 216 /> 217 </v-col> 218 <v-col cols="12"> 219 <v-text-field 220 prepend-icon="mail" 221 placeholder="Email" 222 /> 223 </v-col> 224 <v-col cols="12"> 225 <v-text-field 226 type="tel" 227 prepend-icon="phone" 228 placeholder="(000) 000 - 0000" 229 /> 230 </v-col> 231 <v-col cols="12"> 232 <v-text-field 233 prepend-icon="notes" 234 placeholder="Notes" 235 /> 236 </v-col> 237 </v-row> 238 </v-container> 239 <v-card-actions> 240 <v-btn 241 text 242 color="primary" 243 > 244 More 245 </v-btn> 246 <v-spacer /> 247 <v-btn 248 text 249 color="primary" 250 @click="dialog = false" 251 > 252 Cancel 253 </v-btn> 254 <v-btn 255 text 256 @click="dialog = false" 257 > 258 Save 259 </v-btn> 260 </v-card-actions> 261 </v-card> 262 </v-dialog> 263 </v-app> 264</template> 265 266

nuxt

1<script> 2export default { 3 ????props: { 4 source: String 5 }, 6 data: () => ({ 7 dialog: false, 8 drawer: null, 9 items: [ 10 { icon: 'mdi-contacts', text: 'Contacts' }, 11 { icon: 'mdi-history', text: 'Frequently contacted' }, 12 { icon: 'mdi-content-copy', text: 'Duplicates' }, 13 { 14 icon: 'mdi-chevron-up', 15 'icon-alt': 'mdi-chevron-down', 16 text: 'Labels', 17 model: true, 18 children: [ 19 { icon: 'mdi-plus', text: 'Create label' } 20 ] 21 }, 22 { 23 icon: 'mdi-chevron-up', 24 'icon-alt': 'mdi-chevron-down', 25 text: 'More', 26 model: false, 27 children: [ 28 { text: 'Import' }, 29 { text: 'Export' }, 30 { text: 'Print' }, 31 { text: 'Undo changes' }, 32 { text: 'Other contacts' } 33 ] 34 }, 35 { icon: 'mdi-settings', text: 'Settings' }, 36 { icon: 'mdi-message', text: 'Send feedback' }, 37 { icon: 'mdi-help-circle', text: 'Help' }, 38 { icon: 'mdi-cellphone-link', text: 'App downloads' }, 39 { icon: 'mdi-keyboard', text: 'Go to the old version' } 40 ] 41 }) 42} 43</script>

写経したGithubのソースコード↓↓

Vuetify/Google Contacs

###試したこと

以下のサイトを参考に、default値の追記やrequired: true or required: falseの追記をしてみたが、解決に至らなかった。

コンポーネントの props で required を付けるときは default を定義した方がよさそう
vue/require-valid-default-prop のESLint警告の解消方法
【Vue.js】プロパティ(props)の使用方法

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

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

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

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

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

guest

回答2

0

他に解決した方法がありましたので、こちらに記載いたします。

<script> export default { // 以下のコードを追記 // eslint-disable-next-line ★追記 source: String } </script>

これでエラーが発生されなくなります。

投稿2020/01/20 06:18

toshihirokato

総合スコア20

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

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

0

ベストアンサー

diff

1 props: { 2- source: String 3 4 // これか 5+ source: { 6+ type: String, 7+ required: true 8+ } 9 10 // あるいはこれで 11+ source: { 12+ type: String, 13+ required: false, 14+ default: '' 15 },

投稿2020/01/18 05:40

nico25

総合スコア830

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

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

toshihirokato

2020/01/20 01:29

ご回答頂きありがとうございます!! source: { type: String, required: false, default: "" } こちらを追加したところ解決いたしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問