teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問LaravelでjQueryのプラグインを使う方法

編集履歴

質問編集履歴

3

内容の修正

2020/01/29 09:06

投稿

ryo12su29kel
ryo12su29kel

スコア26

test CHANGED
File without changes
test CHANGED
@@ -56,198 +56,22 @@
56
56
 
57
57
  ```ここに言語を入力
58
58
 
59
- [Vue warn]: Error compiling template:
59
+ jQuery.Deferred exception: $(...).japanMap is not a function TypeError: $(...).japanMap is not a function
60
+
61
+ at HTMLDocument.<anonymous> (http://192.168.33.10:8000/home:27:24)
62
+
63
+ at e (http://192.168.33.10:8000/js/jquery-3.4.1.min.js:2:29453)
64
+
65
+ at t (http://192.168.33.10:8000/js/jquery-3.4.1.min.js:2:29755)
60
66
 
61
67
 
62
68
 
63
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
69
+ Uncaught TypeError: $(...).japanMap is not a function
64
70
 
65
-
66
-
67
- 73 | </div>
68
-
69
- 74 | <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
70
-
71
- 75 | <script type="text/javascript" src="/js/japanmap/jquery.japan-map.min.js"></script>
72
-
73
- |
74
-
75
- 76 | <script>
76
-
77
- | ^^^^^^^^
78
-
79
- 77 | $(function(){
80
-
81
- | ^^^^^^^^^^^^^^^^^
82
-
83
- 78 |
84
-
85
- |
86
-
87
- 79 | $("#map-container").japanMap({
88
-
89
- | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
90
-
91
- 80 | onSelect : function(data){
92
-
93
- | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
94
-
95
- 81 | alert(data.name);
96
-
97
- | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
98
-
99
- 82 | }
100
-
101
- | ^^^^^^^^^^^^^
102
-
103
- 83 | });
104
-
105
- | ^^^^^^^^^^^
106
-
107
- 84 |
108
-
109
- |
110
-
111
- 85 | });
112
-
113
- | ^^^^^^^
114
-
115
- 86 | </script>
116
-
117
- | ^^^^^^^^^
118
-
119
- 87 | </main>
120
-
121
- | ^^^^^^^^^^^^^^^
122
-
123
- 88 | </div>
124
-
125
- | ^^^^^^^^^^
126
-
127
-
128
-
129
- (found in <Root>)
130
-
131
- warn @ app.js:38081
132
-
133
- (anonymous) @ app.js:49149
134
-
135
- compileToFunctions @ app.js:49148
136
-
137
- ./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:49372
138
-
139
- Vue._init @ app.js:42459
140
-
141
- Vue @ app.js:42525
142
-
143
- ./resources/js/app.js @ app.js:49526
144
-
145
- __webpack_require__ @ app.js:20
146
-
147
- 0 @ app.js:49664
148
-
149
- __webpack_require__ @ app.js:20
150
-
151
- (anonymous) @ app.js:84
152
-
153
- (anonymous) @ app.js:87
154
-
155
- app.js:46502 Download the Vue Devtools extension for a better development experience:
156
-
157
- https://github.com/vuejs/vue-devtools
158
-
159
- app.js:46511 You are running Vue in development mode.
160
-
161
- Make sure to turn on production mode when deploying for production.
162
-
163
- See more tips at https://vuejs.org/guide/deployment.html
164
-
165
- jquery-3.4.1.min.js:2 jQuery.Deferred exception: $(...).japanMap is not a function TypeError: $(...).japanMap is not a function
166
-
167
- at HTMLDocument.<anonymous> (http://192.168.33.10:8000/home:102:29)
168
-
169
- at e (http://192.168.33.10:8000/js/jquery-3.4.1.min.js:2:29453)
170
-
171
- at t (http://192.168.33.10:8000/js/jquery-3.4.1.min.js:2:29755) undefined
172
-
173
- k.Deferred.exceptionHook @ jquery-3.4.1.min.js:2
174
-
175
- t @ jquery-3.4.1.min.js:2
176
-
177
- setTimeout (async)
178
-
179
- (anonymous) @ jquery-3.4.1.min.js:2
180
-
181
- c @ jquery-3.4.1.min.js:2
182
-
183
- fireWith @ jquery-3.4.1.min.js:2
184
-
185
- fire @ jquery-3.4.1.min.js:2
186
-
187
- c @ jquery-3.4.1.min.js:2
188
-
189
- fireWith @ jquery-3.4.1.min.js:2
190
-
191
- ready @ jquery-3.4.1.min.js:2
192
-
193
- B @ jquery-3.4.1.min.js:2
194
-
195
- jquery-3.4.1.min.js:2 Uncaught TypeError: $(...).japanMap is not a function
196
-
197
- at HTMLDocument.<anonymous> (home:102)
71
+ at HTMLDocument.<anonymous> (home:27)
198
72
 
199
73
  at e (jquery-3.4.1.min.js:2)
200
74
 
201
75
  at t (jquery-3.4.1.min.js:2)
202
76
 
203
- (anonymous) @ home:102
204
-
205
- e @ jquery-3.4.1.min.js:2
206
-
207
- t @ jquery-3.4.1.min.js:2
208
-
209
- setTimeout (async)
210
-
211
- k.readyException @ jquery-3.4.1.min.js:2
212
-
213
- (anonymous) @ jquery-3.4.1.min.js:2
214
-
215
- e @ jquery-3.4.1.min.js:2
216
-
217
- t @ jquery-3.4.1.min.js:2
218
-
219
- setTimeout (async)
220
-
221
- (anonymous) @ jquery-3.4.1.min.js:2
222
-
223
- c @ jquery-3.4.1.min.js:2
224
-
225
- fireWith @ jquery-3.4.1.min.js:2
226
-
227
- fire @ jquery-3.4.1.min.js:2
228
-
229
- c @ jquery-3.4.1.min.js:2
230
-
231
- fireWith @ jquery-3.4.1.min.js:2
232
-
233
- t @ jquery-3.4.1.min.js:2
234
-
235
- setTimeout (async)
236
-
237
- (anonymous) @ jquery-3.4.1.min.js:2
238
-
239
- c @ jquery-3.4.1.min.js:2
240
-
241
- fireWith @ jquery-3.4.1.min.js:2
242
-
243
- fire @ jquery-3.4.1.min.js:2
244
-
245
- c @ jquery-3.4.1.min.js:2
246
-
247
- fireWith @ jquery-3.4.1.min.js:2
248
-
249
- ready @ jquery-3.4.1.min.js:2
250
-
251
- B @ jquery-3.4.1.min.js:2
252
-
253
77
  ```

2

具体的な説明の追加

2020/01/29 09:06

投稿

ryo12su29kel
ryo12su29kel

スコア26

test CHANGED
File without changes
test CHANGED
@@ -47,3 +47,207 @@
47
47
  </script>
48
48
 
49
49
  ```
50
+
51
+
52
+
53
+ デベロッパーツールで見たエラーログはこのような感じです。
54
+
55
+
56
+
57
+ ```ここに言語を入力
58
+
59
+ [Vue warn]: Error compiling template:
60
+
61
+
62
+
63
+ Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
64
+
65
+
66
+
67
+ 73 | </div>
68
+
69
+ 74 | <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
70
+
71
+ 75 | <script type="text/javascript" src="/js/japanmap/jquery.japan-map.min.js"></script>
72
+
73
+ |
74
+
75
+ 76 | <script>
76
+
77
+ | ^^^^^^^^
78
+
79
+ 77 | $(function(){
80
+
81
+ | ^^^^^^^^^^^^^^^^^
82
+
83
+ 78 |
84
+
85
+ |
86
+
87
+ 79 | $("#map-container").japanMap({
88
+
89
+ | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
90
+
91
+ 80 | onSelect : function(data){
92
+
93
+ | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
94
+
95
+ 81 | alert(data.name);
96
+
97
+ | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
98
+
99
+ 82 | }
100
+
101
+ | ^^^^^^^^^^^^^
102
+
103
+ 83 | });
104
+
105
+ | ^^^^^^^^^^^
106
+
107
+ 84 |
108
+
109
+ |
110
+
111
+ 85 | });
112
+
113
+ | ^^^^^^^
114
+
115
+ 86 | </script>
116
+
117
+ | ^^^^^^^^^
118
+
119
+ 87 | </main>
120
+
121
+ | ^^^^^^^^^^^^^^^
122
+
123
+ 88 | </div>
124
+
125
+ | ^^^^^^^^^^
126
+
127
+
128
+
129
+ (found in <Root>)
130
+
131
+ warn @ app.js:38081
132
+
133
+ (anonymous) @ app.js:49149
134
+
135
+ compileToFunctions @ app.js:49148
136
+
137
+ ./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:49372
138
+
139
+ Vue._init @ app.js:42459
140
+
141
+ Vue @ app.js:42525
142
+
143
+ ./resources/js/app.js @ app.js:49526
144
+
145
+ __webpack_require__ @ app.js:20
146
+
147
+ 0 @ app.js:49664
148
+
149
+ __webpack_require__ @ app.js:20
150
+
151
+ (anonymous) @ app.js:84
152
+
153
+ (anonymous) @ app.js:87
154
+
155
+ app.js:46502 Download the Vue Devtools extension for a better development experience:
156
+
157
+ https://github.com/vuejs/vue-devtools
158
+
159
+ app.js:46511 You are running Vue in development mode.
160
+
161
+ Make sure to turn on production mode when deploying for production.
162
+
163
+ See more tips at https://vuejs.org/guide/deployment.html
164
+
165
+ jquery-3.4.1.min.js:2 jQuery.Deferred exception: $(...).japanMap is not a function TypeError: $(...).japanMap is not a function
166
+
167
+ at HTMLDocument.<anonymous> (http://192.168.33.10:8000/home:102:29)
168
+
169
+ at e (http://192.168.33.10:8000/js/jquery-3.4.1.min.js:2:29453)
170
+
171
+ at t (http://192.168.33.10:8000/js/jquery-3.4.1.min.js:2:29755) undefined
172
+
173
+ k.Deferred.exceptionHook @ jquery-3.4.1.min.js:2
174
+
175
+ t @ jquery-3.4.1.min.js:2
176
+
177
+ setTimeout (async)
178
+
179
+ (anonymous) @ jquery-3.4.1.min.js:2
180
+
181
+ c @ jquery-3.4.1.min.js:2
182
+
183
+ fireWith @ jquery-3.4.1.min.js:2
184
+
185
+ fire @ jquery-3.4.1.min.js:2
186
+
187
+ c @ jquery-3.4.1.min.js:2
188
+
189
+ fireWith @ jquery-3.4.1.min.js:2
190
+
191
+ ready @ jquery-3.4.1.min.js:2
192
+
193
+ B @ jquery-3.4.1.min.js:2
194
+
195
+ jquery-3.4.1.min.js:2 Uncaught TypeError: $(...).japanMap is not a function
196
+
197
+ at HTMLDocument.<anonymous> (home:102)
198
+
199
+ at e (jquery-3.4.1.min.js:2)
200
+
201
+ at t (jquery-3.4.1.min.js:2)
202
+
203
+ (anonymous) @ home:102
204
+
205
+ e @ jquery-3.4.1.min.js:2
206
+
207
+ t @ jquery-3.4.1.min.js:2
208
+
209
+ setTimeout (async)
210
+
211
+ k.readyException @ jquery-3.4.1.min.js:2
212
+
213
+ (anonymous) @ jquery-3.4.1.min.js:2
214
+
215
+ e @ jquery-3.4.1.min.js:2
216
+
217
+ t @ jquery-3.4.1.min.js:2
218
+
219
+ setTimeout (async)
220
+
221
+ (anonymous) @ jquery-3.4.1.min.js:2
222
+
223
+ c @ jquery-3.4.1.min.js:2
224
+
225
+ fireWith @ jquery-3.4.1.min.js:2
226
+
227
+ fire @ jquery-3.4.1.min.js:2
228
+
229
+ c @ jquery-3.4.1.min.js:2
230
+
231
+ fireWith @ jquery-3.4.1.min.js:2
232
+
233
+ t @ jquery-3.4.1.min.js:2
234
+
235
+ setTimeout (async)
236
+
237
+ (anonymous) @ jquery-3.4.1.min.js:2
238
+
239
+ c @ jquery-3.4.1.min.js:2
240
+
241
+ fireWith @ jquery-3.4.1.min.js:2
242
+
243
+ fire @ jquery-3.4.1.min.js:2
244
+
245
+ c @ jquery-3.4.1.min.js:2
246
+
247
+ fireWith @ jquery-3.4.1.min.js:2
248
+
249
+ ready @ jquery-3.4.1.min.js:2
250
+
251
+ B @ jquery-3.4.1.min.js:2
252
+
253
+ ```

1

文法の修正

2020/01/29 08:11

投稿

ryo12su29kel
ryo12su29kel

スコア26

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,9 @@
16
16
 
17
17
 
18
18
 
19
+
20
+
19
- ```php
21
+ ```html
20
22
 
21
23
  <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>
22
24