Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Notepad in Nuxt using Vue 2.0
<template>
<li>
<div class="box">
<div class="content">
<div class="editable">
<input type="text" class="input" v-model="imessage" @keyup="$emit('edit', index, imessage)">
</div>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item">
<span class="icon is-small has-text-danger">
<i class="fa fa-trash-o" @click="$emit('remove', index)"></i>
</span>
</a>
</div>
</nav>
</div>
</li>
</template>
<script>
export default {
props: {
index: { required: true },
message: { required: true }
},
data() {
return {
imessage: this.message
}
}
}
</script>
module.exports = {
/*
** Headers of the page
*/
head: {
title: 'ToDo App',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'ToDo App' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
{ rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.css' },
{ rel: 'stylesheet', href: 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' }
]
},
/*
** Customize the progress bar color
*/
loading: { color: '#3B8070' },
/*
** Build configuration
*/
build: {
/*
** Run ESLint on save
*/
extend(config, ctx) {
if (ctx.dev && ctx.isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
}
}
}
}
{
"name": "ntemplate",
"version": "1.0.0",
"description": "ToDo App",
"author": "Joseph Spurrier",
"private": true,
"scripts": {
"dev": "PORT=8080 nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate",
"lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
"precommit": "npm run lint"
},
"dependencies": {
"nuxt": "^1.0.0-rc11",
"shortid": "^2.2.8"
},
"devDependencies": {
"babel-eslint": "^7.2.3",
"eslint": "^4.3.0",
"eslint-config-standard": "^10.2.1",
"eslint-loader": "^1.9.0",
"eslint-plugin-html": "^3.1.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-node": "^5.1.1",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-standard": "^3.0.1",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6"
}
}
<template>
<section class="section">
<div class="container">
<div>
<nuxt-link to="/">Back to home</nuxt-link>
</div>
<div class="box">
<div class="field">
<label class="label">To Do</label>
<div class="control">
<input id="inputTodo" class="input" type="text" placeholder="What would you like to do?" @keydown.enter="handleAdd">
</div>
</div>
</div>
<div>
<ul id="listTodo">
<li is="Note" v-for="(v, k) in TodoList.list" :key="v.id" :index="k" :message="v.message" @remove="handleDelete" @edit="handleUpdate"></li>
</ul>
</div>
</div>
</section>
</template>
<script>
import Note from '~/components/note.vue';
import shortid from 'shortid';
export default {
components: {
Note
},
data() {
return {
TodoList: {
STORAGE_KEY: 'todos-vuejs-2.0',
list: [],
saveItems: function() {
localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.list));
},
loadItems: function() {
this.list = JSON.parse(localStorage.getItem(this.STORAGE_KEY) || '[]');
console.log('Loaded items:', this.list.length);
},
addItem: function() {
let inputTodo = document.getElementById('inputTodo');
this.list.push({ id: shortid.generate(), message: inputTodo.value });
inputTodo.value = '';
this.saveItems();
},
deleteItem: function(position) {
this.list.splice(position, 1);
this.saveItems();
},
updateItem: function(position, text) {
this.list[position].message = text;
this.saveItems();
}
}
}
},
methods: {
handleAdd() {
this.TodoList.addItem();
},
handleUpdate(id, text) {
this.TodoList.updateItem(id, text);
},
handleDelete(id) {
this.TodoList.deleteItem(id);
}
},
mounted() {
this.TodoList.loadItems();
}
}
</script>
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.