0

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

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

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

<!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>
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 = '';
        }
    }
})

teratailにもマルチポストさせていただいておりますので、ご容赦くださいませ。


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

[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>)
[Vue warn]: Error in render: "TypeError: todo is undefined"

(found in <Root>) vue.js:634:17
TypeError: "todo is undefined"
1
  • 1
    こちらで試したところ、質問文のコードはエラーを発生させていますが、「このエラーはこの質問で言及している問題とは関係がないので無視した」ものだと考えて良いのでしょうか?
    – supa
    Commented 2019年12月19日 10:57

2 件の回答 2

3

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

  • todos という配列の要素数だけの li 要素
  • input 要素
  • todo オブジェクトの item プロパティの値をコンテンツとして持つ span 要素
<li v-for="todo in todos"></li>
<input type="checkbox">
<span>{{ todo.item }}</span>

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

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 = '';
    }
  }
})
<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>

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

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 = '';
    }
  }
})
<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>

1
  • @suma 様 liタグでinputタグとspanタグを挟んだらLive Serverで反映されました。お忙しい中ご教授いただきありがとうございました・
    – atago_IT
    Commented 2019年12月20日 17:58
0

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

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

<!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>

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

<!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>

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。