teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問【vue】Unknown custom element になるが原因がわからない

編集履歴

質問編集履歴

2

問題が発生する最小のコードに変更しました。

2020/01/21 10:30

投稿

aoisensi
aoisensi

スコア29

test CHANGED
File without changes
test CHANGED
@@ -6,29 +6,25 @@
6
6
 
7
7
  ```log
8
8
 
9
- [Vue warn]: Unknown custom element: <SKGameDota2MatchTeamTable> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
9
+ [Vue warn]: Unknown custom element: <SKTestButton> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
10
10
 
11
11
  ```
12
12
 
13
- `SKGameDota2Match.vue`も`SKGameDota2MatchTeamTable.vue`も`"name"`を指定しているはずなのにDevTool上では`<Anonymous Component>`扱いされてしまうのが原因だと思うのですが、どこが悪いかわかりません。
13
+ `SKHomepage.vue`も`SKTestButton.vue`も`"name"`を指定しているはずなのにDevTool上では`<Anonymous Component>`扱いされてしまうのが原因だと思うのですが、どこが悪いかわかりません。
14
14
 
15
15
 
16
16
 
17
- SKGameDota2Match.vue
17
+ SKHomepage.vue
18
18
 
19
19
  ```vue
20
20
 
21
21
  <template>
22
22
 
23
- <div>
23
+ <div>
24
24
 
25
- <h1>Radiant</h1>
25
+ <h1>Homepage</h1>
26
26
 
27
- <SKGameDota2MatchTeamTable :players="goodPlayers"></SKGameDota2MatchTeamTable>
28
-
29
- <h1>Dire</h1>
27
+ <SKTestButton></SKTestButton>
30
-
31
- <SKGameDota2MatchTeamTable :players="badPlayers"></SKGameDota2MatchTeamTable>
32
28
 
33
29
  </div>
34
30
 
@@ -38,105 +34,25 @@
38
34
 
39
35
  <script lang="ts">
40
36
 
41
- import { Component, Vue } from 'vue-property-decorator';
42
-
43
- import "vue-router/types/vue";
37
+ import Vue from 'vue'
44
38
 
45
39
 
46
40
 
47
- import { Dota2Match, Dota2MatchPlayer } from "../../../game/dota2/Dota2Match";
41
+ import SKTestButton from './SKTestButton.vue'
48
42
 
49
43
 
50
44
 
51
- import SKGameDota2MatchTeamTable from "./SKGameDota2MatchTeamTable.vue";
45
+ export default Vue.extend({
52
46
 
53
-
54
-
55
- interface DataType {
56
-
57
- match: Dota2Match | null,
58
-
59
- goodPlayers: Dota2MatchPlayer[],
60
-
61
- badPlayers: Dota2MatchPlayer[],
62
-
63
- }
64
-
65
-
66
-
67
- @Component({
68
-
69
- name: "SKGameDota2Match",
47
+ name: 'sk-homepage',
70
48
 
71
49
  components: {
72
50
 
73
- SKGameDota2MatchTeamTable,
51
+ 'SKTestButton': SKTestButton,
74
-
75
- },
76
-
77
- data(): DataType {
78
-
79
- return {
80
-
81
- match: null,
82
-
83
- goodPlayers: [],
84
-
85
- badPlayers: [],
86
-
87
- }
88
-
89
- },
90
-
91
- mounted() {
92
-
93
- const matchID = this.$route.params["match_id"];
94
-
95
- this.axios
96
-
97
- .get<Dota2Match>("/game/dota2/matches/" + matchID + ".json")
98
-
99
- .then(response => {
100
-
101
- this.$data.match = response.data;
102
-
103
- const players = response.data.players;
104
-
105
- this.$data.goodPlayers = [
106
-
107
- players[0],
108
-
109
- players[1],
110
-
111
- players[2],
112
-
113
- players[3],
114
-
115
- players[4],
116
-
117
- ];
118
-
119
- this.$data.badPlayers = [
120
-
121
- players[5],
122
-
123
- players[6],
124
-
125
- players[7],
126
-
127
- players[8],
128
-
129
- players[9],
130
-
131
- ];
132
-
133
- });
134
52
 
135
53
  },
136
54
 
137
55
  })
138
-
139
- export default class SKGameDota2Match extends Vue {};
140
56
 
141
57
  </script>
142
58
 
@@ -144,45 +60,13 @@
144
60
 
145
61
 
146
62
 
147
- SKGameDota2MatchTeamTable.vue
63
+ SKTestButton.vue
148
64
 
149
- ```
65
+ ```vue
150
66
 
151
67
  <template>
152
68
 
153
- <div>
154
-
155
- <el-table :data="players">
69
+ <button>Push me!</button>
156
-
157
- <el-table-column label="Player" prop="persona" width="200" fixed></el-table-column>
158
-
159
- <el-table-column label="Lv" prop="level" align="center" width="60"></el-table-column>
160
-
161
- <el-table-column label="K" prop="kills" align="center" width="60"></el-table-column>
162
-
163
- <el-table-column label="D" prop="deaths" align="center" width="60"></el-table-column>
164
-
165
- <el-table-column label="A" prop="assists" align="center" width="60"></el-table-column>
166
-
167
- <el-table-column label="Gold" prop="gold" align="right" width="100"></el-table-column>
168
-
169
- <el-table-column label="LH" prop="last_hits" align="right" width="80"></el-table-column>
170
-
171
- <el-table-column label="DN" prop="denies" align="left" width="80"></el-table-column>
172
-
173
- <el-table-column label="GPM" prop="gold_per_min" align="right" width="80"></el-table-column>
174
-
175
- <el-table-column label="XPM" prop="xp_per_min" align="right" width="80"></el-table-column>
176
-
177
- <el-table-column label="HEAL" prop="hero_healing" align="right" width="100"></el-table-column>
178
-
179
- <el-table-column label="HERO" prop="hero_damage" align="right" width="100"></el-table-column>
180
-
181
- <el-table-column label="BUILD" prop="tower_damage" align="right" width="100"></el-table-column>
182
-
183
- </el-table>
184
-
185
- </div>
186
70
 
187
71
  </template>
188
72
 
@@ -190,25 +74,13 @@
190
74
 
191
75
  <script lang="ts">
192
76
 
193
- import Vue from "vue";
77
+ import Vue from 'vue'
194
-
195
-
196
-
197
- import { Dota2Match, Dota2MatchPlayer } from "../../../game/dota2/Dota2Match";
198
-
199
-
200
78
 
201
79
  export default Vue.extend({
202
80
 
203
- name: "SKGameDota2MatchTeamTable",
81
+ 'name': 'SKTestButton'
204
82
 
205
- props: {
206
-
207
- "players": {},
208
-
209
- },
210
-
211
- });
83
+ })
212
84
 
213
85
  </script>
214
86
 
@@ -219,3 +91,7 @@
219
91
  続報1
220
92
 
221
93
  `Vue.component`を使えば名前ありで登録できました。これを使わず登録するにはどうすればいいでしょう?
94
+
95
+ 編集2
96
+
97
+ 問題が発生する最小のコードに変更しました。

1

続報の追加

2020/01/21 10:30

投稿

aoisensi
aoisensi

スコア29

test CHANGED
File without changes
test CHANGED
@@ -213,3 +213,9 @@
213
213
  </script>
214
214
 
215
215
  ```
216
+
217
+
218
+
219
+ 続報1
220
+
221
+ `Vue.component`を使えば名前ありで登録できました。これを使わず登録するにはどうすればいいでしょう?