@sickgang

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

Привет
Не могу решить такую задачку
Есть 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)
      })
    }


Как иначе это можно реализовать?
  • Вопрос задан
  • 339 просмотров
Пригласить эксперта
Ответы на вопрос 2
0xD34F
@0xD34F Куратор тега Vue.js
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.
Ответ написан
Fragster
@Fragster
помогло? отметь решением!
Проще всего (да и правильнее) сделать компонент модального окна и выводить его в цикле.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы