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

←前回

概要

手っ取り早くソースコードを最初に載せます。
index.vue

<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",
  head() {
    return {
      titleTemplate: null,
    };
  },
  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.list = [];
      for (var key in localStorage) {
        if (localStorage.hasOwnProperty(key)) {
          this.list.push(key);
        }
      }
      this.get();
    },
  },
};
</script>


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

こうなるはずです。

これでTODOが完成しました。
次回、localStorageについて解説します。