Nuxt.js+Vuetify+localStorageにてTODOを作る【ソースコード】

←前回

↑以下のソースコード通りにすれば、こうなるはずです。(Nuxt.jsで動かしています)

ソースコード

<template>
  <v-container>
    <div class="max800">
      <form @submit.prevent="add">
        <v-row>
          <v-col cols="9">
            <v-text-field v-model="text" label="タスク"></v-text-field>
          </v-col>
          <v-col cols="3">
            <v-btn color="primary" type="submit" block> 追加 </v-btn>
          </v-col>
        </v-row>
      </form>

      <ul>
        <li v-for="list in task">
          <v-row>
            <v-col cols="9">
              {{ data(list) }}
            </v-col>
            <v-col cols="3">
              <v-btn color="error" block @click="remove(list)">削除</v-btn>
            </v-col>
          </v-row>
        </li>
      </ul>
    </div>
  </v-container>
</template>

<script>
export default {
  name: "IndexPage",
  data() {
    return {
      text: "",
      task: [],
    };
  },
  mounted() {
    this.get();
  },
  methods: {
    get: function () {
      this.task = [];
      for (var key in localStorage) {
        if (localStorage.hasOwnProperty(key)) {
          this.task.push(key);
        }
      }
    },
    add: function () {
      localStorage.setItem(localStorage.length, this.text);
      this.text = "";
      this.get();
    },
    data: function (n) {
      var check = localStorage.getItem(n);
      return check;
    },
    remove: function (n) {
      localStorage.removeItem(n);
      this.get();
    },
  },
};
</script>

<style>
.max800 {
  max-width: 800px;
  margin: 0 auto;
}
</style>

解説を入れながら

<template>
  <v-container>
    <div class="max800">
      <form @submit.prevent="add">
        <v-row>
          <v-col cols="9">
            <v-text-field v-model="text" label="タスク"></v-text-field>
          </v-col>
          <v-col cols="3">
            <v-btn color="primary" type="submit" block> 追加 </v-btn>
          </v-col>
        </v-row>
      </form>

      <ul>
　　　　//listには"key"が入っています
        <li v-for="list in task">
          <v-row>
            <v-col cols="9">
              {{ data(list) }}
            </v-col>
            <v-col cols="3">
              <v-btn color="error" block @click="remove(list)">削除</v-btn>
            </v-col>
          </v-row>
        </li>
      </ul>
    </div>
  </v-container>
</template>

<script>
export default {
  name: "IndexPage",
  data() {
    return {
      text: "",
      task: [],
    };
  },
  mounted() {
    this.get();
  },
  methods: {
    //タスクの一覧を取得
    get: function () {
      this.task = [];
　　　localStorageの中身の数だけForを行います。
      for (var key in localStorage) {
        //keyがあるかどうか
        if (localStorage.hasOwnProperty(key)) {
          this.task.push(key);
        }
      }
    },
　　//タスクを追加
    add: function () {
      localStorage.setItem(localStorage.length, this.text);
      this.text = "";
      this.get();
    },
    data: function (n) {
　　　//keyからvalueを受け取る。
      var check = localStorage.getItem(n);
      return check;
    },
    remove: function (n) {
　　　//該当するkeyを持つlocalStorageを削除。
      localStorage.removeItem(n);
　　　//もう一度、整理する。
      this.get();
    },
  },
};
</script>

<style>
.max800 {
  max-width: 800px;
  margin: 0 auto;
}

あとがき

簡易的な説明ですが、これで完結です。
正直なところ、文章力が致命的に欠けているんですよね自分・・・