I am creating a todo list in vue.js, but I want to add an editing function.

What do you want to solve

I am creating a todo app in vue.js, but I would like to be able to edit the todo that I created.

Problems/errors encountered

I tried many things.There are currently no errors, but the changes are not reflected.

What I'm thinking about is the process of implementing editing functions

アイコンEditTask action occurs when the icon is pressed.
②If a prompt appears and one or more characters are inputted, a sentence entered with id is put in the real argument and the sentence is shifted to an edit function.
③Define editindex, and if the editTask action id and edit function id are the same (i.e., check which todo you edited), replace the edited sentence with editindex.
④Put the title of the provisional argument into the todos after editing the sentence (editIndex).

Affected Source Codes

<!DOCTYPE html>
<html lang="ja">
  <head>
    <metacharset="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 Application</title>
  </head>
  <body>
    <divid="app">
      <h1>TODO Application </h1</h1>
      <form v-on:submit.prevent="addTasks">
        <label for="title" > Title </label>
        <br of >
        <input
          type = "text"
          id="title"
          name = "title"
          placeholder="Please enter a task."
          size = "30"
          maxlength = "20"
          v-model="addTitle"
        />
        <br of >
        <br of >
        <label for="deadline">Expiration date</label>
        <br of >
        <input type="date" id="deadline" name="deadline" v-model="deadline"/>
        <br of >
        <input type="submit" value="Add"/>
      </form>
      <table>
        <thead>
          <tr>
            <th>Status</th>
            <th>ID</th>
            <th>Title </th>
            <th> Deadline </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(todo, index) intodos" v-bind:key="todo.id">
            <td><button@click="changeToDo(todo.id)">Work Complete</button></td>
            <td>{{todo.id}}</td>
            <td>{{todo.title}}}</td>
            <td>{{todo.deadline}}</td>
            <td@click="removeTask"><ic class="fas fa-trash-alt">/i></td>
            <td@click="editTask"><ic class="fas fa-edit">/i></td>
          </tr>
          <tr
            v-for="(todo,index)intodos"
            v-bind:key="todo.id"
            v-if="todo.flag===false"
            class="completeTasks"
          >
            <td><button@click="changeToDo(todo.id)">Return</button></td>
            <td>{{todo.id}}</td>
            <td>{{todo.title}}}</td>
            <td>{{todo.deadline}}</td>
            <td@click="removeTask"><ic 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,
  },
  // Partial omitted //
    editTask() {
      let newTitle=window.prompt("Update with:");
      if(newTitle===""){
        alert("Enter field is blank.");
      }
      This.edit(newTitle);
    },
    edit(title){
      This.todos[0].addTitle=title;
    },
    // hereinafter abbreviated

What I tried myself

One of the things I've tried

editTask(){
      let newTitle=window.prompt("Update with:");
      if(newTitle===""){
        alert("Enter field is blank.");
      }
      This.edit(newTitle);
    },

edit(title){
      let editIndex="";
      This.todos [editIndex].addTitle=title; 
    },
// TypeError: Cannot set property 'addTitle' of undefined

Try 2

editTask(){
      let newTitle=window.prompt("Update with:");
      if(newTitle===""){
        alert("Enter field is blank.");
      }
      This.edit(newTitle);
    },
    edit(title){
console.log(title) // Input characters are printed
      This.todos[0].addTitle=title;
    },

Three things I've tried


editTask() {
      let newTitle=window.prompt("Update with:");
      if(newTitle===""){
        alert("Enter field is blank.");
      }
      This.edit(newTitle);
    },
    edit(title){
      let editIndex=this.todos.addTitle;
      editIndex=title;
    }, // There was no error, but it was not reflected.

As a result of posting the results I tried, it became messy and ugly.I think it's basic, but I appreciate your cooperation.
I have asked the same question on other sites.
https://teratail.com/questions/296016

javascript vue.js

2022-09-29 20:27

1 Answers

It was resolved by passing the index to the edit argument.Thank you.

2022-09-29 20:27

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656