Q&A
回答ありがとうございます。どのタスクに対しての編集かは条件分岐をしたらいいんですか？
解決したいこと
vue.jsでtodoアプリを作っていますが、作成したtodoを編集できるようにしたいです。
発生している問題・エラー
いろいろなことを試しました。現在はエラーは出ませんが、変更も反映されません。
頭の中で考えている編集機能実装処理の流れ
①アイコンを押すと、editTaskアクションが発生する。
②プロンプトが出てきて１文字以上入力すると、実引数の中にidと入力した文章を入れて、edit関数に移行する。
③editindexを定義して、もしeditTaskアクションのidとedit関数のidが同じ（つまり、どのtodoを編集したかの確認）だったら編集後の文章をeditindexに代入。
④仮引数のtitleを編集後の文章（editIndex)をtodosの中に入れる。
該当するソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 7 <link 8 href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" 9 rel="stylesheet" 10 /> 11 <title>TODOアプリ</title> 12 </head> 13 <body> 14 <div id="app"> 15 <h1>Vue.jsでTODOアプリ</h1> 16 <form v-on:submit.prevent="addTasks"> 17 <label for="title">タイトル</label> 18 <br /> 19 <input 20 type="text" 21 id="title" 22 name="title" 23 placeholder="タスクを入力してください。" 24 size="30" 25 maxlength="20" 26 v-model="addTitle" 27 /> 28 <br /> 29 <br /> 30 <label for="deadline">期限</label> 31 <br /> 32 <input type="date" id="deadline" name="deadline" v-model="deadline" /> 33 <br /> 34 <input type="submit" value="追加する" /> 35 </form> 36 <table> 37 <thead> 38 <tr> 39 <th>ステータス</th> 40 <th>ID</th> 41 <th>タイトル</th> 42 <th>期限</th> 43 </tr> 44 </thead> 45 <tbody> 46 <tr v-for="(todo, index) in todos" v-bind:key="todo.id"> 47 <td><button @click="changeToDo(todo.id)">作業完了</button></td> 48 <td>{{todo.id}}</td> 49 <td>{{todo.title}}</td> 50 <td>{{todo.deadline}}</td> 51 <td @click="removeTask"><i class="fas fa-trash-alt"></i></td> 52 <td @click="editTask"><i class="fas fa-edit"></i></td> 53 </tr> 54 <tr 55 v-for="(todo, index) in todos" 56 v-bind:key="todo.id" 57 v-if="todo.flag === false" 58 class="completeTasks" 59 > 60 <td><button @click="changeToDo(todo.id)">戻す</button></td> 61 <td>{{todo.id}}</td> 62 <td>{{todo.title}}</td> 63 <td>{{todo.deadline}}</td> 64 <td @click="removeTask"><i class="fas fa-trash-alt"></i></td> 65 </tr> 66 </tbody> 67 </table> 68 </div> 69 <script src="main.js"></script> 70 </body> 71</html> 72
js
1 2var app = new Vue({ 3 el: "#app", 4 data: { 5 todos: [], 6 addTitle: "", 7 deadline: null, 8 }, 9 // 一部省略 // 10 editTask() { 11 let newTitle = window.prompt("以下内容で更新します。"); 12 if (newTitle === "") { 13 alert("入力欄が空欄です。"); 14 } 15 this.edit(newTitle); 16 }, 17 edit(title) { 18 this.todos[0].addTitle = title; 19 }, 20 // 以下省略
自分で試したこと
試したことその１
js
1editTask() { 2 let newTitle = window.prompt("以下内容で更新します。"); 3 if (newTitle === "") { 4 alert("入力欄が空欄です。"); 5 } 6 this.edit(newTitle); 7 }, 8 9edit(title) { 10 let editIndex = ""; 11 this.todos[editIndex].addTitle = title; 12 }, 13// TypeError: Cannot set property 'addTitle' of undefined と出る
試したことその２
js
1editTask() { 2 let newTitle = window.prompt("以下内容で更新します。"); 3 if (newTitle === "") { 4 alert("入力欄が空欄です。"); 5 } 6 this.edit(newTitle); 7 }, 8 edit(title) { 9console.log(title) // 入力された文字が出力される 10 this.todos[0].addTitle = title; 11 },
試したことその３
js
1 2editTask() { 3 let newTitle = window.prompt("以下内容で更新します。"); 4 if (newTitle === "") { 5 alert("入力欄が空欄です。"); 6 } 7 this.edit(newTitle); 8 }, 9 edit(title) { 10 let editIndex = this.todos.addTitle; 11 editIndex = title; 12 }, // エラーは出なかったが反映はされず。
試した結果を載せた結果ごちゃごちゃで醜くなってしまいました。基礎的なことかと思いますが、よろしくお願いします。
回答2件
0
シンプルに書くならeditTaskやremoveTaskの関数の引数としてindex持たせたほうがよろしいかと。
javascript
1editTask(editindex) { 2 let newTitle = window.prompt("以下内容で更新します。"); 3 if (newTitle === "") { 4 alert("入力欄が空欄です。"); 5 return ; 6 } 7 //this.edit(newTitle); 8 this.todos[editIndex].addTitle = newTitle ; 9 },
html
1<td @click="editTask(index)"><i class="fas fa-edit"></i></td>
投稿2020/10/05 08:08
総合スコア3830
0
ベストアンサー
let editIndex = ""; this.todos[editIndex].addTitle = title;
添字が数字ではないものでアクセスすると、オブジェクトのプロパティを参照することになる
""という名前のプロパティはtodosに存在しない
editTaskでどのタスクに対しての編集かが取れていない（removeTaskも）ので
その辺から調整する必要があります
投稿2020/10/05 04:02
総合スコア5036
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。