JSFiddle - React, Tailwind, and code Playground

by amitavroy

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div class="app">
  <pre>{{$data}}</pre>
  <p>
    <input 
      type="text" 
      @keyup.enter="addTodo"
      v-model="newTodo">
  </p>
</div>

JavaScript

// trying to understand the code from Evan You
// to building the Todo App

var STORAGE_KEY = 'todos-vuejs-2.0'
var todoStorage = {
	fetch: function() {
  	var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
    todos.forEach(function (todo, index) {
      todo.id = index
    })
    todoStorage.uid = todos.length
    return todos
  },
  save: function(todos) {
  	localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
  }
}

var app = new Vue({
	data: {
  	todos: todoStorage.fetch(),
	  newTodo: ''
  },
  
  methods: {
	  addTodo() {
      var value = this.newTodo && this.newTodo.trim()
      if (!value) {
	      return
      }
      this.todos
    }
  }
});

app.$mount('.app');