TodoPage.vue for Quasar 2.11.5

TodoPage.vue

<!--
Adapted from Rebecca Manzi's [Todo App](https://github.com/rebeccamanzi/quasar-todo) for Quasar 1.0.0. This one works 
correctly with Quasar 2.11.5. To use it, update quasar.config.js > frameworks > plugins to include 'Notify' in the plugins
array.
-->

<template>
  <q-page class="bg-grey-3 column">
    <div class="row q-pa-sm bg-primary">
      <q-input
        @keyup.enter="addTask"
        filled
        v-model="newTask"
        placeholder="Add Task"
        dense
        bg-color="white"
        class="col"
        square
      >
        <template v-slot:append>
          <q-btn round dense flat icon="add" @click="addTask" />
        </template>
      </q-input>
    </div>
    <q-list separator bordered class="bg-white">
      <q-item
        v-for="(task, index) in tasks"
        :key="task.title"
        @click="task.done = !task.done"
        :class="{ 'done bg-blue-1': task.done }"
        clickable
        v-ripple
      >
        <q-item-section avatar>
          <q-checkbox
            v-model="task.done"
            class="no-pointer-events"
            color="primary"
          />
        </q-item-section>
        <q-item-section>
          <q-item-label>{{ task.title }}</q-item-label>
        </q-item-section>

        <q-item-section v-if="task.done" side>
          <q-btn
            @click.stop="deleteTask(index)"
            flat
            round
            color="primary"
            icon="delete"
          />
        </q-item-section>
      </q-item>
    </q-list>
    <div v-if="!tasks.length" class="no-tasks absolute-center">
      <q-icon name="check" size="100px" color="primary" />
      <div class="text-h5 text-primary text-center">No Tasks</div>
    </div>
  </q-page>
</template>

<script>
import { useQuasar } from "quasar";

export default {
  data() {
    return {
      newTask: "",
      tasks: [],
    };
  },
  setup() {
    const $q = useQuasar();
    return {};
  },
  methods: {
    addTask() {
      this.tasks.push({
        title: this.newTask,
        done: false,
      });
      this.newTask = "";
    },
    deleteTask(index) {
      this.$q.notify({
        message: "Task deleted!",
        color: "purple",
      });
      this.tasks.splice(index, 1);
    },
  },
};
</script>