как сбросить v-модель входа при редактировании при нажатии кнопки отмены? - PullRequest
0 голосов
/ 18 марта 2020

У меня есть v-for, который перебирает массив объектов комментариев и показывает их на экране в теге ap, затем у меня рядом с ним кнопка редактирования, чем при нажатии она переключает тег p в текстовую область с помощью v -модель связана comment.description с 2 кнопками под netath (сохранить и отменить), чтобы пользователь мог изменить его, дело в том, что мне бы хотелось, чтобы, когда пользователь нажимает кнопку отмены, текст возвращался к своему первоначальному значению, поэтому я пытаюсь присвоить comment.description исходное значение, но я не могу его сделать, так как оно всегда указывает одно и то же до перезагрузки. это html:

</div>

<div v-show="comment.isEditing" class="col form-group">
    <textarea
     class="form-control"
     name="comment-description"
     cols="10"
     rows="1"
     v-model="comment.description"
     ></textarea>
     <p class="mb-0 font-smaller grey-color">{{ comment.time_ago }}</p>
     <button
      type="button"
      class="btn btn-secondary"
      @click="updateComment(comment.id, comment)"
      >Guardar</button>
      <button
      type="button"
      class="btn btn-danger"
      @click="toggleEditing( comment, index,  cancel_edit = true)"
      >Cancelar</button>
</div>

и метод переключения:

       async toggleEditing(comment, index, cancel_edit) {
      console.log(cancel_edit);
      const original_description = comment.description;
      const isOpening = !comment.isEditing;
      this.comments
        .filter(c => c.isEditing)
        .forEach(c => (c.isEditing = false));

      if (isOpening) {
        comment.isEditing = true;
        await this.$nextTick();
      }
      if (cancel_edit === true) {
        this.$set(this.comments[index], 'description', original_description);
        console.log(this.comments[index]);
      }
    }

Я не знаю, возможно, будет лучше запускать другую функцию при нажатии кнопки отмены

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...