

### 解決したいこと

vue.jsでtodoアプリを作っていますが、作成したtodoを編集できるようにしたいです。

### 発生している問題・エラー

いろいろなことを試しました。現在はエラーは出ませんが、変更も反映されません。

### 頭の中で考えている編集機能実装処理の流れ

①アイコンを押すと、editTaskアクションが発生する。  
②プロンプトが出てきて１文字以上入力すると、実引数の中にidと入力した文章を入れて、edit関数に移行する。  
③editindexを定義して、もしeditTaskアクションのidとedit関数のidが同じ（つまり、どのtodoを編集したかの確認）だったら編集後の文章をeditindexに代入。  
④仮引数のtitleを編集後の文章（editIndex)をtodosの中に入れる。

### 該当するソースコード

[code]

    <!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>
    
    
[/code]

[code]

    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;
        },
        // 以下省略
    
[/code]

### 自分で試したこと

試したことその１

[code]

    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 と出る
    
[/code]

試したことその２

[code]

    editTask() {
          let newTitle = window.prompt("以下内容で更新します。");
          if (newTitle === "") {
            alert("入力欄が空欄です。");
          }
          this.edit(newTitle);
        },
        edit(title) {
    console.log(title) // 入力された文字が出力される
          this.todos[0].addTitle = title;
        },
    
[/code]

試したことその３

[code]

    editTask() {
          let newTitle = window.prompt("以下内容で更新します。");
          if (newTitle === "") {
            alert("入力欄が空欄です。");
          }
          this.edit(newTitle);
        },
        edit(title) {
          let editIndex = this.todos.addTitle;
          editIndex = title;
        }, // エラーは出なかったが反映はされず。
    
[/code]

試した結果を載せた結果ごちゃごちゃで醜くなってしまいました。基礎的なことかと思いますが、よろしくお願いします。  
他サイトでも同様の質問してます。  
<https://teratail.com/questions/296016>


CC BY-SA 4.0
2020-10-05T03:33:47.757
70917
2022-08-18T06:02:15.183
2020-10-05T05:10:53.953
41278
41278
question
javascript vue.js
vue.jsでtodoリストを作っていますが、編集機能をつけたい。


editの引数にindexを渡すことで解決しました。ありがとうございます。


CC BY-SA 4.0
2020-10-05T10:41:29.953
70935
2020-10-05T10:41:29.953
41278
70917
answer