ionic vue

todo.vue

<template>
  <div class="app">
    <div class="container">
      <div class="row header">
        <h1 class="col s6 offset-s3 center-align teal-text">To-Do List!</h1>
      </div>
      <div class="row">
        <form @submit.prevent="submitTodo" class="col s6 offset-s3">
          <ion-item>
            <ion-label position="floating">What needs to be done?</ion-label>
            <ion-input :value="newTodo" @input="newTodo = $event.target.value" required></ion-input>
          </ion-item>
          <ion-button expand="full" color="primary" type="submit">Add</ion-button>
        </form>
      </div>
      <div class="row">
        <ul class="collection col s6 offset-s3">
          <li class="collection-item" v-for="todo in $store.getters.todos" :key="todo.id">
            <p>
              <input
                type="checkbox"
                class="checkbox-round"
                :checked="todo.done"
                @change="todo.done = !todo.done; update(todo)"
              >
              <label for="checkbox"></label>
              <del v-if="todo.done">
                <span>{{todo.title}}</span>
              </del>
              <span v-else>{{todo.title}}</span>
              <span class="delete">
                <a @click.prevent="deleteTodo(todo)">
                  <ion-icon name="ios-trash" style="zoom:1.5;"></ion-icon>
                </a>
              </span>
            </p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      newTodo: ""
    };
  },
  mounted() {
    var db = null;

    document.addEventListener("deviceready", function() {
      db = window.sqlitePlugin.openDatabase({
        name: "todos.db",
        location: "default"
      });
      db.transaction(
        function(tx) {
          tx.executeSql("CREATE TABLE IF NOT EXISTS DemoTable (name, score)");
          tx.executeSql("INSERT INTO DemoTable VALUES (?,?)", ["Alice", 101]);
          tx.executeSql("INSERT INTO DemoTable VALUES (?,?)", ["Betty", 202]);
        },
        function(error) {
          console.log("Transaction ERROR: " + error.message);
        },
        function() {
          console.log("Populated database OK");
        }
      );
    });
    this.$store.commit("fetchTodos");
  },
  methods: {
    submitTodo() {
      document.addEventListener("deviceready", function() {
        console.log("Test");
      })
      if (astilectron) {
      this.$store.commit("addTodo", {
        title: this.newTodo
      });
      }
      this.newTodo = "";
    },
    deleteTodo(todo) {
      this.$store.commit("removeTodo", todo);
    },
    update(todo) {
      this.$store.commit("updateTodo", todo);
    }
  }
};
</script>

-<style>
.header {
  margin-top: 100px;
}
.checkbox-round {
  width: 1.3em;
  height: 1.3em;
  background-color: white;
  border-radius: 50%;
  vertical-align: middle;
  border: 1px solid #ddd;
  -webkit-appearance: none;
  outline: none;
  cursor: pointer;
  float: left;
}
.checkbox-round:checked {
  background-color: green;
}
.collection {
  list-style: none;
}

.delete {
  float: right;
}
</style>