vue todo

by Mayank Kumar Chaudhari

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>An Awesome Vuejs Course</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
    <link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
    <link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css">
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-material"></script>
  </head>

  <body>
    <div id="app">
      <md-app md-waterfall md-mode="overlap">
        <md-app-toolbar class="md-primary md-large">
          <div class="md-toolbar-row">
            <md-button class="md-icon-button" @click="menuVisible = !menuVisible">
              <md-icon>menu</md-icon>
            </md-button>

            <span class="md-title">My First Awesome Vue Project</span>
            <div class="md-toolbar-section-end">
              <md-button class="md-icon-button" @click="prompt = true">
                <md-icon>add</md-icon>
              </md-button>
            </div>
          </div>
        </md-app-toolbar>

        <md-app-drawer :md-active.sync="menuVisible">
          <md-toolbar class="md-transparent" md-elevation="0">
            Navigation
          </md-toolbar>

          <md-list>
            <md-list-item>
              <md-icon>move_to_inbox</md-icon>
              <span class="md-list-item-text">Inbox</span>
            </md-list-item>

            <md-list-item>
              <md-icon>send</md-icon>
              <span class="md-list-item-text">Sent Mail</span>
            </md-list-item>

            <md-list-item>
              <md-icon>delete</md-icon>
              <span class="md-list-item-text">Trash</span>
            </md-list-item>

            <md-list-item>
              <md-icon>error</md-icon>
              <span...

CSS

body {
  text-align: center;
}

.notactive {
  text-decoration: line-through;
}

@import "~vue-material/theme/engine";

.phone-viewport {
  width: 322px;
	height: 55px;
  display: inline-flex;
  align-items: flex-end;
  overflow: hidden;
  border: 1px solid rgba(#000, .26);
  background: rgba(#000, .06);
}

.badge {
  width: 19px;
  height: 19px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 6px;
  right: 6px;
  background: #fff;
  border-radius: 100%;
  color: #000;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: -.05em;
  font-family: 'Roboto Mono', monospace;
}

.md-app {
  height: 100vh;
  border: 1px solid rgba(#000, .12);
	padding-bottom: 55px;
}

// Demo purposes only
.md-drawer {
  width: 230px;
  max-width: calc(100vw - 125px);
}

.bottom {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: #f55;
}

JavaScript

Vue.use(VueMaterial.default);

let myVue = new Vue({
  el: '#app',
  data: {
    newTask: '',
    tasks: JSON.parse(localStorage.getItem('my-tasks'))||[],
		prompt: false,
		menuVisible: false,
		tab: 0
  },
  methods: {
    addTask() {
      if (this.newTask.trim() != '')
        this.tasks.push({
          title: this.newTask,
          done: false
        });
      this.newTask = '';
    }
  },
	computed: {
	  completed(){
		  return this.tasks.filter((task)=>task.done);
		},
		active(){
			return this.tasks.filter((task)=>!task.done);
		}
	},
	watch: {
		tasks: {
			deep: true,
			handler(val){
				localStorage.setItem('my-tasks', JSON.stringify(val));
			}
		}
	}
});