質問編集履歴

3

エラー内容の追加

2020/04/03 01:45

投稿

stakizawa
stakizawa

スコア117

test CHANGED
File without changes
test CHANGED
@@ -298,6 +298,26 @@
298
298
 
299
299
  })
300
300
 
301
+
302
+
303
+ vueApp.$mount(#app)
304
+
305
+ ```
306
+
307
+
308
+
309
+ #### エラー内容
310
+
311
+ ブラウザ上で下記のような表示が出力されます。
312
+
313
+ ```
314
+
315
+ <!--function (a, b, c, d) {
316
+
317
+ return createElement(vm, a, b, c, d, true);
318
+
319
+ }-->
320
+
301
321
  ```
302
322
 
303
323
 

2

追記部分のmain.jsの修正

2020/04/03 01:44

投稿

stakizawa
stakizawa

スコア117

test CHANGED
File without changes
test CHANGED
@@ -286,7 +286,7 @@
286
286
 
287
287
  // main.js
288
288
 
289
- new Vue({
289
+ var vueApp = new Vue({
290
290
 
291
291
  el: '#app',
292
292
 

1

コンポーネントを一つ渡してみた場合の追記

2020/04/03 01:42

投稿

stakizawa
stakizawa

スコア117

test CHANGED
File without changes
test CHANGED
@@ -238,4 +238,74 @@
238
238
 
239
239
 
240
240
 
241
+ ### 追記:2020/04/03
242
+
243
+ 試しに下記のようにVueコンポーネントを一つDjangoテンプレートに渡してみたところ、うまくいきませんでした。
244
+
245
+ Djangoテンプレートに下記のような方法で渡すのは難しいのでしょうか?
246
+
247
+
248
+
249
+ ```html
250
+
251
+ {% load render_bundle from webpack_loader %}
252
+
253
+ <!DOCTYPE html>
254
+
255
+ <html>
256
+
257
+ <head>
258
+
259
+ <meta charset="UTF-8">
260
+
261
+ <title>Sapmle Page</title>
262
+
263
+ </head>
264
+
265
+
266
+
267
+ <body>
268
+
269
+ <div id="app">
270
+
271
+ <sample/>
272
+
273
+ </div>
274
+
275
+ {% render_bundle 'app' %}
276
+
277
+ </body>
278
+
279
+ </html>
280
+
281
+ ```
282
+
283
+
284
+
285
+ ```javascript
286
+
287
+ // main.js
288
+
289
+ new Vue({
290
+
291
+ el: '#app',
292
+
293
+ components: {
294
+
295
+ Sample
296
+
297
+ }
298
+
299
+ })
300
+
301
+ ```
302
+
303
+
304
+
305
+ 以下のリンクのように読み込みたいです。
306
+
307
+ [vue.jsのDjangoでの使い所](https://qiita.com/gsk3beta/items/2c237d1434b06e9ebf8b)
308
+
309
+
310
+
241
311
  以上、拙い文章ではございますが、どなたかご教授頂けると幸いです。