vueでtodoリストを作りたい

Question

vueでtodoリストを作りたい

本を見ながらvueでtodoリストを作ろうとしていますが、うまく表示されません。
何度も見直ししましたが、どこかが間違えているのかわかりません。

症状としては、v-forが動いていないみたいで、liタグが出てこないです。

ソースコード

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// ストアの定義
const store = new Vuex.Store({
  state:{
    tasks: [
      {
        id: 1,
        name: '牛乳を買う',
        done: false
      },
      {
        id: 2,
        name: 'Vue の本を買う',
        done: true
      }
    ],
  },
})

// ストアをエクスポート
export default store

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
  <div>
    <h2>タスク一覧</h2>
    <ul>
      <li v-for='task in tasks' v-bind:key="task.id" >
        <input type="checkbox" v-bind:checked="task.done">
        {{ task.name }}
      </li>
    </ul>
  </div>
</template>


<script>
export default  {
  computed: {
    tasks () {
      return this.$store.state.tasks
    },
  },
}
</script>

試したこと

「vue.js入門」という本の通りに書いているのですが、リストが表示されないです。
何度も本と見比べましたが分かりません・・・

Comments

[DaikiOjima]

ブラウザのconsoleになにかエラーメッセージなどは表示されていますでしょうか？

また、
> v-forが動いていないみたいで、liタグが出てこないです。

とありますが、computedにvuexを参照した値ではなく直接値を記述した場合も同じ症状でしょうか？

[donkuri]

>DaikiOjima
ありがとうございます。
エラーは出ていません。
dataとかで直接値を記入してもliタグが出てこないです。

[donkuri]

>DaikiOjima
すみません。
ずっと色々やっていたのですが良く分からないので
もう一度create vueからやり直したところ動きました。

問題点は見つけられませんでしたが、ひとまずこれで先に進みたいと思います。
見ていただいてありがとうございました。

Answer 1

もう一度create vueからやり直したところ動きました。
見ていただいてありがとうございました。