Q&ADjangoのテンプレートに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
回答1件
0
自己解決
こちらを参考にして、解決しました。
↓
Django template と Vue.js を使う場合の注意点
投稿2021/01/04 04:46
総合スコア26
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。