Vue.jsでtodoリストの編集ができるようにしたい。
Q&A
Closed
解決したいこと
vue.jsでtodoアプリを作っていますが、作成したtodoを編集できるようにしたいです。
発生している問題・エラー
いろいろなことを試しましたが、現在はエラーは出ませんが、変更も反映されません。
頭の中で考えている編集機能実装処理の流れ
①アイコンを押すと、editTaskアクションが発生する。
②プロンプトが出てきて１文字以上入力すると、実引数の中にidと入力した文章を入れて、edit関数に移行する。
③editindexを定義して、もしeditTaskアクションのidとedit関数のidが同じ（つまり、どのtodoを編集したかの確認）だったら編集後の文章をeditindexに代入。
④仮引数のtitleを編集後の文章（editIndex)をtodosの中に入れる。
該当するソースコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link
href="https://use.fontawesome.com/releases/v5.6.1/css/all.css"
rel="stylesheet"
/>
<title>TODOアプリ</title>
</head>
<body>
<div id="app">
<h1>Vue.jsでTODOアプリ</h1>
<form v-on:submit.prevent="addTasks">
<label for="title">タイトル</label>
<br />
<input
type="text"
id="title"
name="title"
placeholder="タスクを入力してください。"
size="30"
maxlength="20"
v-model="addTitle"
/>
<br />
<br />
<label for="deadline">期限</label>
<br />
<input type="date" id="deadline" name="deadline" v-model="deadline" />
<br />
<input type="submit" value="追加する" />
</form>
<table>
<thead>
<tr>
<th>ステータス</th>
<th>ID</th>
<th>タイトル</th>
<th>期限</th>
</tr>
</thead>
<tbody>
<tr v-for="(todo, index) in todos" v-bind:key="todo.id">
<td><button @click="changeToDo(todo.id)">作業完了</button></td>
<td>{{todo.id}}</td>
<td>{{todo.title}}</td>
<td>{{todo.deadline}}</td>
<td @click="removeTask"><i class="fas fa-trash-alt"></i></td>
<td @click="editTask"><i class="fas fa-edit"></i></td>
</tr>
<tr
v-for="(todo, index) in todos"
v-bind:key="todo.id"
v-if="todo.flag === false"
class="completeTasks"
>
<td><button @click="changeToDo(todo.id)">戻す</button></td>
<td>{{todo.id}}</td>
<td>{{todo.title}}</td>
<td>{{todo.deadline}}</td>
<td @click="removeTask"><i class="fas fa-trash-alt"></i></td>
</tr>
</tbody>
</table>
</div>
<script src="main.js"></script>
</body>
</html>
var app = new Vue({
el: "#app",
data: {
todos: [],
addTitle: "",
deadline: null,
},
// 一部省略 //
editTask() {
let newTitle = window.prompt("以下内容で更新します。");
if (newTitle === "") {
alert("入力欄が空欄です。");
}
this.edit(newTitle);
},
edit(title) {
this.todos[0].addTitle = title;
},
// 以下省略
自分で試したこと
試したことその１
editTask() {
let newTitle = window.prompt("以下内容で更新します。");
if (newTitle === "") {
alert("入力欄が空欄です。");
}
this.edit(newTitle);
},
edit(title) {
let editIndex = "";
this.todos[editIndex].addTitle = title;
},
// TypeError: Cannot set property 'addTitle' of undefined と出る
試したことその２
editTask() {
let newTitle = window.prompt("以下内容で更新します。");
if (newTitle === "") {
alert("入力欄が空欄です。");
}
this.edit(newTitle);
},
edit(title) {
console.log(title) // 入力された文字が出力される
this.todos[0].addTitle = title;
},
試したことその３
editTask() {
let newTitle = window.prompt("以下内容で更新します。");
if (newTitle === "") {
alert("入力欄が空欄です。");
}
this.edit(newTitle);
},
edit(title) {
let editIndex = this.todos.addTitle;
editIndex = title;
}, // エラーは出なかったが反映はされず。
試した結果を載せた結果ごちゃごちゃで醜くなってしまいました。基礎的なことかと思いますが、よろしくお願いします。
0 likes
