0

https://github.com/rush4fun/viseven-course-2020-task4 - тут весь код

Есть приложение галерея. При клике на картинку открывается поп ап с комментариями. При добавлении нового комментария добавляется блок с новой информацией в правую часть.

Потом, если начать изменять значение инпута, сразу же начинается изменятся значение только что добавленого комментария.

Как только вводишь какие-то изменения в инпуте, сразу меняется и добавленый новый комментарий. Подскажите как исправить

    <div class="comments-add">
    <div class="comments-add__inner">
        <input type="text" name="nickname" id="nickname" class="text comments-add__input comments-add__nickname" placeholder="Type your nickname here..." @change="addCommentAuthor">
        <input type="text" name="review" id="review" class="text comments-add__input comments-add__review" placeholder="Write your comment here..." @change="addCommentText">
        <button class="btn" @click="addComment"><img src="img/icon_send.svg" alt="Send"></button>
     </div>
 </div>

 let imagesVue = new Vue({

 el: '#app',

 data: {

    images: images,

    currentImage: images[0],
    newComment: {
        author: '',
        text: '',
        date: (function () {
            let date = new Date();

            let day = date.getDate();
            if (day < 10) day = '0' + day;

            let month = date.getMonth() + 1;
            if (month < 10) month = '0' + month;

            let year = date.getFullYear() % 100;
            if (year < 10) year = '0' + year;

            let hours = date.getHours();
            if (hours < 10) hours = '0' + hours;

            let minutes = date.getMinutes();
            if (minutes < 10) minutes = '0' + minutes;

            return `${day}.${month}.${year} ${hours}:${minutes}`;
        })(),
    },
},
methods: {

    addCommentAuthor() {

        let nickname = document.querySelector('#nickname');

        this.newComment.author = nickname.value;

    },

    addCommentText() {

        let review = document.querySelector('#review');

        this.newComment.text = review.value;

    },

    addComment() {

        if (this.newComment.author != '' && this.newComment.text != '') {

            images[this.currentImage.id].comments.push(this.newComment);

        } else {

            alert('Please write some text');

        }

    },});

1 ответ 1

0

Нужно создать копию объекта newComment перед добавлением в массив comments:

images[this.currentImage.id].comments.push({
  ...this.newComment
});

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.