やりたいこと
Djangoのtemplatesのhtmlファイルに、Vueの単一コンポーネントを複数渡したいです。
例えば、VueでSample-1とSample-2のコンポーネントを用意します。
そして、Djangoのindex.htmlに上記2つのコンポーネントを別々で呼び出して表示させたいです。
vue
1// Sample-1.vue 2<template> 3 <h1>Sample-1</h1> 4</template> 5 6<script> 7export default { 8 name: { 9 'Sample-1' 10 } 11} 12</script>
vue
1// Sample-2.vue 2<template> 3 <h1>Sample-2</h1> 4</template> 5 6<script> 7export default { 8 name: { 9 'Sample-2' 10 } 11} 12</script>
html
1{% load render_bundle from webpack_loader %} 2<!DOCTYPE html> 3<html> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Sapmle Page</title> 7 </head> 8 9 <body> 10 <div id="app"> 11 <Sample-1/> 12 <Sample-2/> 13 </div> 14 {% render_bundle 'app' %} 15 </body> 16</html>
試したこと
entry-pointであるmain.jsで以下の記述を試してみました。
パターン1
javascript
1new VUe({ 2 el: '#app', 3 components: { 4 Smaple-1, 5 Smaple-2 6 } 7})
エラー内容
ESlintにより下記のエラーが出力されました。
Do not use 'new' for side effects.
パターン2
javascript
1new Vue({ 2 components: { 3 Sample-1, 4 Smaple-2 5 } 6}).$mount('#app')
エラー内容
Sample-1もSample-2も表示されませんでした。
パターン3
javascript
1const vueApp = new Vue({ 2 components: { 3 Sample-1, 4 Smaple-2 5 } 6}) 7 8vueApp.$mount('#app')
エラー内容
Sample-1もSample-2も表示されませんでした。
パターン4
javascript
1new Vue({ 2 render: h => h(Sample-1, Sample-2) 3}).$mount('#app')
エラー内容
Sample-1は表示されたものの、Sample-2は表示されませんでした。
環境
- VirtualBox
- vagrant
- centos-7
- Python 3.7.0
- Django 2.5.5
- Vue.js 2.6.11
- vue/cli 4.2.3
- Vuetify 2.2.11
追記:2020/04/03
試しに下記のようにVueコンポーネントを一つDjangoテンプレートに渡してみたところ、うまくいきませんでした。
Djangoテンプレートに下記のような方法で渡すのは難しいのでしょうか?
html
1{% load render_bundle from webpack_loader %} 2<!DOCTYPE html> 3<html> 4 <head> 5 <meta charset="UTF-8"> 6 <title>Sapmle Page</title> 7 </head> 8 9 <body> 10 <div id="app"> 11 <sample/> 12 </div> 13 {% render_bundle 'app' %} 14 </body> 15</html>
javascript
1// main.js 2var vueApp = new Vue({ 3 el: '#app', 4 components: { 5 Sample 6 } 7}) 8 9vueApp.$mount(#app)
エラー内容
ブラウザ上で下記のような表示が出力されます。
<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->
以下のリンクのように読み込みたいです。
vue.jsのDjangoでの使い所
以上、拙い文章ではございますが、どなたかご教授頂けると幸いです。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。