How to pass input value and change it in modal window?

Question

Vue.js

Hello
I can’t solve such a problem.
There is a todo sheet, when you click on the editing buttons of one task, a modal window opens and the value of the input to which I clicked edit is transferred to the input, here I was smart, but when saving, I can’t save the value of the already changed input, how can I solve it?

<table class="table table-hover table-borded table-striped">
        <thead class="thead-dark">
        <tr>
          <th scope="col">#</th>
          <th scope="col">Наименование</th>
          <th scope="col">Дата</th>
          <th scope="col">Статус</th>
          <th scope="col">Действия</th>
        </tr>
        </thead>
        <tbody class="table-striped">
          <list
          v-for="(task,index) in tasksFiltered" :key="task.title"
          :tasks="task"
          :index="index"
          :class="{yellow: task.checked}"
          @deleteTask="deleteTask"
          @editTask="editTask"
          />
        </tbody>
        <tr>
          <th scope="row"></th>
          <td><input class="white" type="text" placeholder="Введите название задачи" v-model="newTask.title"></td>
          <td><input type="text" placeholder="Введите дату выполнения задачи" v-model="newTask.date"></td>
          <td></td>
          <td>
            <button @click="addTask()" class="btn-small green mr-2"><i class="large material-icons">add</i></button>
          </td>
        </tr>
      </table>
        </tbody>

      <div class="" v-show="isModal">
         <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Редактировать</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <input type="text" v-model="editidTask.title">
              <input type="text" v-model="editidTask.date">
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="isModal = false">Close</button>
              <button type="button" class="btn btn-primary" @click="saveEditTask">Save changes</button>
            </div>
          </div>
        </div>
      </div>

I made an object in data in which the value of inputs is assigned to which I poked
With these functions, I tried to redo the tasks array, but when saving, the editidTask object is already empty

editTask (task, index) {
      this.isModal = true
      this.editidTask.title = task.title
      this.editidTask.date = task.date
      this.editidTask.id = index
    },
    saveEditTask () {
      this.tasks.map((task, index) => {
        if (index === this.editidTask.id) {
          console.log(this.editTask.date)
          task.date = this.editTask.date
          task.title = this.editTask.title
        }
         console.log(this.tasks)
      })
    }

How else can this be done?

Answer 1

editTask (task, index) {

v-model="editidTask.title"

task.title = this.editTask.title

I see that the names of properties / methods are chosen correctly - it is impossible to confuse.

this.tasks.map((task, index) => {
  if (index === this.editidTask.id) {

First - why iterate over an array if you know the index of the element? By the way, it's very smart to store the index in a property called "id".
Secondly - are you not afraid to update something wrong? You work with the tasks array using the index obtained from the tasksFiltered.

Answer 2

The easiest way (and more correct) is to make a modal window component and display it in a loop.