質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

解決済

1回答

2832閲覧

TODOアプリに編集機能を付けたい

fork_

総合スコア43

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

0クリップ

投稿2020/05/24 14:24

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

自己解決できました。
ありがとうございました。

投稿2020/05/28 06:59

fork_

総合スコア43

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kaji120

2021/07/12 23:24

具体的な自己解決方法を提示してください
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問