У меня есть 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]);
}
}
Я не знаю, возможно, будет лучше запускать другую функцию при нажатии кнопки отмены