Как передать значние input и изменить его в модальном окне?

Question

[sickgang]

Привет
Не могу решить такую задачку
Есть todo лист, при нажатии на кнопки редактирования одной задачи, открывается модальное окно и в input передается значение инпута на который я тыкнул редактировать, тут я намудрил, но при сохранении не получается сохранить значение уже измененного инпута, как можно решить это?

<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>

Я сделал в data обьект в котором присваиваются значение инпутов на который я тыкнул
Этими функциями я пытался переделать массив tasks, но при сохранении, в обьекте editidTask уже пусто

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)
      })
    }

Как иначе это можно реализовать?

Answer 1

[0xD34F]

editTask (task, index) {

v-model="editidTask.title"

task.title = this.editTask.title

Вижу, имена свойств/методов подобраны грамотно - перепутать невозможно.

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

Во-первых - зачем перебирать массив, если вам известен индекс элемента? Кстати, очень умно - хранить индекс в свойстве с именем "id".

Во-вторых - не боитесь обновить что-то не то? Работаете с массивом tasks, используя индекс, полученный при работе с tasksFiltered.

UPD. Исправляем:

При сохранении копируем свойства редактируемого объекта, а не метода, начинающего процесс редактирования (серьёзно, как можно было перепутать?).

К чёрту индекс, всё равно удалять с его помощью не получится - для этого нужен индекс в исходном массиве, а не отфильтрованном. Ищем нужный элемент непосредственно в момент сохранения.

Напрямую к заявленной проблеме не относится, но сказать стоит:

Имеет смысл оформить модальное окно как отдельный компонент - упрощаем компонент с таблицей, получаем возможность переиспользовать окно в других местах. Содержимое (текстовые поля) передаём внутрь через слот.

<list

Почему list, если этот компонент работает с одним элементом массива? Не понимаете, в чём разница между "один" и "несколько"?

:tasks="task"

Почему tasks, если передаёте один объект? Повторю свой вопрос - не понимаете, в чём разница между "один" и "несколько"?

:key="task.title"

Что, одинаковых title'ов быть не может? Может. Пусть здесь вместо вводимого пользователем текста будет автоматически генерируемый id.

v-show="isModal"

Отдельное свойство для управления состоянием модального окна не нужно, достаточно редактируемого объекта - окно открывается, если он не null.

task.date = this.editTask.date
task.title = this.editTask.title

Завтра потребуется редактировать третье свойство - будете копипастить? Перечислять вручную ничего не надо, есть же Object.assign.

Comments

[sickgang]

По поводу имена свойств/методов это сарказм?)))
Я же только учусь, все идеально не получится сделать...
Изначально хотя бы как что бы работало

[sickgang]

Вопрос, Как лучше сделать, что бы модальное окно было выводилось на каждой итерации цикла, или же один раз в главном компоненте?

[0xD34F]

Какой ваш родной язык?

[sickgang]

0xD34F, русский

[0xD34F]

Ну вот и займитесь тогда соблюдением пункта 3.6 правил. Если хотите, чтобы разговор у нас получился. Исправите свои комментарии выше - поговорим.

[sickgang]

0xD34F, Исправил, продолжаем разговор?

[0xD34F]

Не исправили.

[sickgang]

0xD34F, исправил

[0xD34F]

Нет.

Вижу, слов вы не понимаете. Ну, удачи тогда вам в самостоятельном решении своих проблем.

[sickgang]

0xD34F, я уже сам исправил, спасибо за помощь)

Answer 2

[Антон Антон]

Проще всего (да и правильнее) сделать компонент модального окна и выводить его в цикле.

Comments

[sickgang]

Я тоже об этом думал, но не знал правильно ли когда в каждом элементе еще и модальное окно это