

Vue.jsでTo Doリストを作っているのですが、VSCodeのLive Serverを起動させても急に反映されなくなりました。ブラウザはFirefox
ESRです。

特にエラーメッセージは出ておりません。どうすればLive Serverを起動したあとにブラウザに反映されるのでしょうか。ご教授願います。

下記はソースコードです。

[code]

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
           <h2>TODO List</h2>
           <form v-on:submit.prevent>
               <input type="text" v-model="newItem">
               <button v-on:click="addItem">
                   Add
               </button>
           </form>
           <ul>
               <li v-for="todo in todos"></li>
                    <input type="checkbox">
                    <span>{{ todo.item }}</span>
           </ul>
           <pre>{{ $data }}</pre>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="main.js"></script>
    </body>
    </html>
    
[/code]

[code]

    var app = new Vue ({
        el: '#app',
        data: {
            newItem: '',
            todos: []
        },
        methods: {
            addItem: function(event) {
                // alert();
                if(this.newItem == '') return;
                var  todo = {
                    item: this.newItem
                };
                this.todos.push(todo);
                this.newItem = '';
            }
        }
    })
    
[/code]

[teratailにもマルチポストさせていただいておりますので、ご容赦くださいませ。](https://teratail.com/questions/230592?modal=q-comp)

* * *

@supa さんからのコメントを受けてFirefoxのConsoleを見ましたが、以下3つのエラーメッセージが出ていました。

[code]

    [Vue warn]: Property or method "todo" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
    
    (found in <Root>)
    
[/code]

[code]

    [Vue warn]: Error in render: "TypeError: todo is undefined"
    
    (found in <Root>) vue.js:634:17
    
[/code]

[code]

    TypeError: "todo is undefined"
    
[/code]


CC BY-SA 4.0
2019-12-19T07:52:03.847
61579
2022-07-15T11:13:11.737
2022-07-15T11:13:11.737
3060
36906
question
html5 vue.js vscode
Vue.jsでTo Doリストを作っているのですが、VSCodeのLive Serverを起動させても急に反映されなくなりました。


以下の HTML を読むと、以下の 3 つの要素が生成されることがわかります:

  * `todos` という配列の要素数だけの `li` 要素
  * `input` 要素
  * `todo` オブジェクトの `item` プロパティの値をコンテンツとして持つ `span` 要素

[code]

    <li v-for="todo in todos"></li>
    <input type="checkbox">
    <span>{{ todo.item }}</span>
    
[/code]

これを踏まえて JavaScript のコードを読むと、そこには **`item` プロパティを持つ `todo`
オブジェクトが存在しない**ことがわかります。そこで、以下のように修正することで、このエラーを解決することが出来ます。

[code]

    var app = new Vue({
      el: '#app',
      data: {
        newItem: '',
        todos: [],
        todo: { // 追加
          item: "アイテム"
        },
      },
      methods: {
        addItem: function(event) {
          if (this.newItem == '') return;
          var todo = {
            item: this.newItem
          };
          this.todos.push(todo);
          this.newItem = '';
        }
      }
    })
[/code]

[code]

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
      <h2>TODO List</h2>
      <form v-on:submit.prevent>
        <input type="text" v-model="newItem">
        <button v-on:click="addItem">Add</button>
      </form>
      <ul>
        <li v-for="todo in todos"></li>
        <input type="checkbox">
        <span>{{ todo.item }}</span>
      </ul>
      <pre>{{ $data }}</pre>
    </div>
[/code]

実際には、 `todos` 配列の値を `span` 要素に挿入したいのだと思うので、以下のように `li` 要素の終了タグの位置を修正し、 `span`
要素内で `v-for`
ディレクティブの[エイリアス](https://jp.vuejs.org/v2/guide/list.html)が展開されるようにすることで、想定どおりの動作になると思います。

[code]

    var app = new Vue({
      el: '#app',
      data: {
        newItem: '',
        todos: [],
      },
      methods: {
        addItem: function(event) {
          if (this.newItem == '') return;
          var todo = {
            item: this.newItem
          };
          this.todos.push(todo);
          this.newItem = '';
        }
      }
    })
[/code]

[code]

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
      <h2>TODO List</h2>
      <form v-on:submit.prevent>
        <input type="text" v-model="newItem">
        <button v-on:click="addItem">Add</button>
      </form>
      <ul>
        <li v-for="todo in todos">
          <input type="checkbox">
          <span>{{ todo.item }}</span>
        </li> <!-- 閉じタグの位置を修正 -->
      </ul>
      <pre>{{ $data }}</pre>
    </div>
[/code]


CC BY-SA 4.0
2019-12-19T17:11:14.580
61598
2019-12-19T17:11:14.580
32986
61579
answer


VS CodeのLive Server機能に反映されなかった理由がわかりました。

下記のファイルではulタグの中のliタグでinputタグとspanタグを挟んでいませんでした。

[code]

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
           <h2>TODO List</h2>
           <form v-on:submit.prevent>
               <input type="text" v-model="newItem">
               <button v-on:click="addItem">
                   Add
               </button>
           </form>
           <ul>
               <li v-for="todo in todos"></li>
                    <input type="checkbox">
                    <span>{{ todo.item }}</span>
           </ul>
           <pre>{{ $data }}</pre>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="main.js"></script>
    </body>
    </html>
    
[/code]

下記が修正後のHTMLのファイルです。liタグの中にinputタグとspanタグが入っています。  
下記と同じように修正しますと、Live Serverに反映されました。

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
           <h2>TODO List</h2>
           <form v-on:submit.prevent>
               <input type="text" v-model="newItem">
               <button v-on:click="addItem">
                   Add
               </button>
           </form>
           <ul>
               <li v-for="todo in todos">
                    <input type="checkbox" v-model="todo.isDone">
                    <span>{{ todo.item }}</span>
                </li>
           </ul>
           <pre>{{ $data }}</pre>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="main.js"></script>
    </body>
    </html>
    
[/code]

ちなみに、JavaScriptファイルは変更する必要がありませんでした。  
ご教授いただきありがとうございました。


CC BY-SA 4.0
2019-12-20T18:04:25.877
61627
2019-12-20T18:04:25.877
36906
61579
answer