Vue.jsでTo Doリストを作っているのですが、VS CodeのLive Serverを起動させても急に反映されなくなりました。

こんにちは。お世話になります。

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件

以下の 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

s8_chu

総合スコア14731

退会済みユーザー

2019/12/20 18:06

Stack Overflowでもお答えいただきありがとうございました。別の手段で解決いたしました。

s8_chu

2019/12/20 18:39 編集

> Stack Overflowでもお答えいただきありがとうございました。別の手段で解決いたしました。質問者さんが自己回答された別の手段について拝見しましたが、私が回答に書いたものと異なる点が見受けられないように思います。どの点が私の回答と異なりますか？

退会済みユーザー

2019/12/29 07:38

s8_chu様遅くなってしまい申し訳ございません。よく見ますと、異なる点、確かに見受けられませんね。。

行動規範の内容に同意します

ベストアンサー

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>