Vue.jsでTODOアプリの編集機能を実装したいです。
実現したいこととしては、
・todo1つ1つに削除、編集ボタンがついていて、編集ボタンをクリックするとテキストボックスが出てくる。
・更新ボタンを押すと、テキストボックスで入力し直した該当のTODOが更新されるようにしたい。
現状、編集ボタンをクリックするとTODO全てに対してテキストボックスが出てくるので、クリックした際に、TODOのIDを取得したいです。
editflagがfalseの時は、編集ボタンを表示させていて、編集ボタンをクリックするとeditflagがtrueになり、更新ボタンに切り替わるという形にしています。このやり方がいいのか分かりませんが、この方法しか思いつきませんでした。。
ご教示のほど、よろしくお願いいたします。
コードは下記になります。
<template> <div id="app"> <h1>TODO</h1> <input type="text" v-model="newtodo" @keyup.enter="addtodo" /> <div v-for="(todo,index) in todos" :key="todo.id"> {{todo.todoitem}}:{{todo.created | moment}} <button @click="deletetodo(index)">削除</button> <div v-if="editflag === false"> <button @click="changeflag(index)">編集</button> </div> <div v-else> <input type="text" v-model="todo.id" /> <button @click="edittodo(index)">更新</button> </div> </div> </div> </template> <script> import moment from "moment"; export default { filters: { moment: function(date) { console.log(date); return moment(date).format("YYYY/MM/DD HH:mm"); } }, data() { return { todos: [], newtodo: "", editflag: false }; }, mounted() { // todos[]から、要素を取得できたら if (localStorage.getItem("todos")) { try { // todosを、JSON形式に変換する this.todos = JSON.parse(localStorage.getItem("todos")); } catch (e) { localStorage.removeItem("todos"); } } }, methods: { addtodo() { if (!this.newtodo) { return; } const params = { todoitem: this.newtodo, editflag: false, created: new Date() }; this.todos.push(params); this.newtodo = ""; this.savetodos(); }, deletetodo(x) { this.todos.splice(x, 1); this.savetodos(); }, changeflag(index) { this.editflag = true; }, edittodo() {}, savetodos() { const parsed = JSON.stringify(this.todos); localStorage.setItem("todos", parsed); } } }; </script> <style>/style>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/07/12 23:24