Skip to content

Instantly share code, notes, and snippets.

@bhaidar bhaidar/main.js
Created Feb 12, 2019

Embed
What would you like to do?
todoapp
import Vue from "vue";
import App from "./App.vue";
Vue.config.productionTip = false;
// localStorage persistence
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));
}
};
// visibility filters
var filters = {
all: function(todos) {
return todos;
},
active: function(todos) {
return todos.filter(function(todo) {
return !todo.completed;
});
},
completed: function(todos) {
return todos.filter(function(todo) {
return todo.completed;
});
}
};
Vue.prototype.$todoStorage = todoStorage;
Vue.prototype.$filters = filters;
// a custom directive to wait for the DOM to be updated
// before focusing on the input field.
// http://vuejs.org/guide/custom-directive.html
Vue.directive("todo-focus", {
// When the bound element is inserted into the DOM...
inserted: function(el, binding) {
if (binding.value) {
el.focus();
}
}
});
const app = new Vue({
render: h => h(App)
});
// handle routing
function onHashChange() {
var visibility = window.location.hash.replace(/#\/?/, "");
if (filters[visibility]) {
app.visibility = visibility;
} else {
window.location.hash = "";
app.visibility = "all";
}
}
window.addEventListener("hashchange", onHashChange);
onHashChange();
// mount
app.$mount("#app");
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.