質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

Q&A

解決済

1回答

1120閲覧

DjangoテンプレートへのVueの適用について

hiroikawa55

総合スコア26

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

0グッド

0クリップ

投稿2021/01/01 13:29

DjangoのテンプレートにVueを適用させたいと思い、あれこれ試すもうまくいきません。
例えばですが
DjangoのテンプレートにVue.jsを導入してaxiosでAjaxしてみた話

のテンプレート(下記)の
Vueの「data」に「message: 'Hello World!'」と入れ、<div id='app'>{{ message }}<div>として、表示をさせようとしても、表示ができません。

何か見逃していることがあるのでしょうか?(かなり基本的なことかもしれないのですが・・)
ハマってしまっているため、お伺いする次第です。どうぞ、よろしくお願い申し上げます。

html

1<!DOCTYPE html> 2<html> 3 <head> 4 <title>Todo</title> 5 </head> 6 7 <body> 8 <h1>My Todo List</h1> 9 <div id="app"> 10 {{ message }} 11 <ul v-cloak v-for="item in todos"> 12 <li v-on:click="changeStatus(item)"> 13 <span style="text-decoration: line-through; color: red" v-if="item.done"> 14 [[ item.task ]] 15 ([[ item.due.getMonth()+1 ]]/[[ item.due.getDate() ]]) 16 </span> 17 <span v-else> 18 [[ item.task ]] 19 ([[ item.due.getMonth()+1 ]]/[[ item.due.getDate() ]]) 20 </span> 21 </li> 22 </ul> 23 </div> 24 25 <script src="https://unpkg.com/vue"></script> 26 <script> 27 28var vm = new Vue({ 29 delimiters: ['[[', ']]'], 30 el: '#app', 31 data: { 32 message: 'Hello world!', 33 todos: [] 34 }, 35 mounted: function() { 36 {% for item in todos %} 37 this.todos.push({ /* vm.todos.push() does not work */ 38 "task": "{{ item.task }}", 39 "due": new Date({{ item.due|date:'U' }} * 1000), 40 "done": {{ item.done|lower }}, 41 }) 42 {% endfor %} 43 }, 44 methods: { 45 changeStatus: function(item) { 46 item.done = !item.done; 47 } 48 } 49}) 50 51 </script> 52 </body> 53</html> 54

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

こちらを参考にして、解決しました。

Django template と Vue.js を使う場合の注意点

投稿2021/01/04 04:46

hiroikawa55

総合スコア26

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問