Q&Aこんにちは。お世話になります。
Vue.jsでTo Doリストを作っているのですが、VS CodeのLive Serverを起動させても急に反映されなくなりました。ブラウザはFirefox ESRです。
特にエラーメッセージは出ておりません。どうすればLive Serverを起動したあとにブラウザに反映されるのでしょうか。ご教授願います。
下記はソースコードです。
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6</head> 7<body> 8 <div id="app"> 9 <h2>TODO List</h2> 10 <form v-on:submit.prevent> 11 <input type="text" v-model="newItem"> 12 <button v-on:click="addItem"> 13 Add 14 </button> 15 </form> 16 <ul> 17 <li v-for="todo in todos"></li> 18 <input type="checkbox"> 19 <span>{{ todo.item }}</span> 20 </ul> 21 <pre>{{ $data }}</pre> 22 </div> 23 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 24 <script src="main.js"></script> 25</body> 26</html>
javascript
1var app = new Vue ({ 2 el: '#app', 3 data: { 4 newItem: '', 5 todos: [] 6 }, 7 methods: { 8 addItem: function(event) { 9 // alert(); 10 if(this.newItem == '') return; 11 var todo = { 12 item: this.newItem 13 }; 14 this.todos.push(todo); 15 this.newItem = ''; 16 } 17 } 18})
stack overflowにもマルチポストさせていただいておりますので、ご容赦くださいませ。
回答2件
0
以下の HTML を読むと、以下の 3 つの要素が生成されることがわかります:
todosという配列の要素数だけのli要素input要素todoオブジェクトのitemプロパティの値をコンテンツとして持つspan要素
html
1<li v-for="todo in todos"></li> 2<input type="checkbox"> 3<span>{{ todo.item }}</span>
これを踏まえて JavaScript のコードを読むと、そこには item プロパティを持つ todo オブジェクトが存在しないことがわかります。そこで、以下のように修正することで、このエラーを解決することが出来ます (動作確認用リンク)。
JavaScript
1var app = new Vue({ 2 el: '#app', 3 data: { 4 newItem: '', 5 todos: [], 6 todo: { // 追加 7 item: "アイテム" 8 }, 9 }, 10 methods: { 11 addItem: function(event) { 12 if (this.newItem == '') return; 13 var todo = { 14 item: this.newItem 15 }; 16 this.todos.push(todo); 17 this.newItem = ''; 18 } 19 } 20})
実際には、 todos 配列の値を span 要素に挿入したいのだと思うので、以下のように li 要素の終了タグの位置を修正し、 span 要素内で v-for ディレクティブのエイリアスが展開されるようにすることで、想定どおりの動作になると思います (動作確認用リンク)。
HTML
1<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 2<div id="app"> 3 <h2>TODO List</h2> 4 <form v-on:submit.prevent> 5 <input type="text" v-model="newItem"> 6 <button v-on:click="addItem">Add</button> 7 </form> 8 <ul> 9 <li v-for="todo in todos"> 10 <input type="checkbox"> 11 <span>{{ todo.item }}</span> 12 </li> <!-- 閉じタグの位置を修正 --> 13 </ul> 14 <pre>{{ $data }}</pre> 15</div>
JavaScript
1var app = new Vue({ 2 el: '#app', 3 data: { 4 newItem: '', 5 todos: [], 6 }, 7 methods: { 8 addItem: function(event) { 9 if (this.newItem == '') return; 10 var todo = { 11 item: this.newItem 12 }; 13 this.todos.push(todo); 14 this.newItem = ''; 15 } 16 } 17})
投稿2019/12/19 17:16
総合スコア14731
0
ベストアンサー
VS CodeのLive Server機能に反映されなかった理由がわかりました。
下記のファイルではulタグの中のliタグでinputタグとspanタグを挟んでいませんでした。
html
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6</head> 7<body> 8 <div id="app"> 9 <h2>TODO List</h2> 10 <form v-on:submit.prevent> 11 <input type="text" v-model="newItem"> 12 <button v-on:click="addItem"> 13 Add 14 </button> 15 </form> 16 <ul> 17 <li v-for="todo in todos"></li> 18 <input type="checkbox"> 19 <span>{{ todo.item }}</span> 20 </ul> 21 <pre>{{ $data }}</pre> 22 </div> 23 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 24 <script src="main.js"></script> 25</body> 26</html>
下記が修正後のHTMLのファイルです。liタグの中にinputタグとspanタグが入っています。
下記と同じように修正しますと、Live Serverに反映されました。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6</head> 7<body> 8 <div id="app"> 9 <h2>TODO List</h2> 10 <form v-on:submit.prevent> 11 <input type="text" v-model="newItem"> 12 <button v-on:click="addItem"> 13 Add 14 </button> 15 </form> 16 <ul> 17 <li v-for="todo in todos"> 18 <input type="checkbox" v-model="todo.isDone"> 19 <span>{{ todo.item }}</span> 20 </li> 21 </ul> 22 <pre>{{ $data }}</pre> 23 </div> 24 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 25 <script src="main.js"></script> 26</body> 27</html>
ちなみに、JavaScriptファイルは変更する必要がありませんでした。
ご教授いただきありがとうございました。
投稿2019/12/20 18:08
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/12/20 18:06
2019/12/20 18:39 編集
退会済みユーザー
2019/12/29 07:38