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

実現したいこと

現在、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)の使用方法

行動規範の内容に同意します

回答2件

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

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

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

投稿2020/01/20 06:18

toshihirokato

総合スコア20

ベストアンサー

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  },