Добавить новый ответ в список после отправки без перезагрузки в vue - PullRequest
Новая
       10

Добавить новый ответ в список после отправки без перезагрузки в vue

0 голосов
/ 29 мая 2020

Я новичок в Vue и пытаюсь создать блог-проект. enter image description here

На изображении выше, когда я нажимаю кнопку ответа, открывается диалоговое окно, и я отправляю ответ на комментарий.

Но проблема здесь в том, что после отправки формы и на dialog = false новый отправленный ответ не отображается в списке.

мой код 

<v-btn
  @click="handleReply(comment.id)"
 >Reply</v-btn>

<v-dialog v-model="dialog" max-width="400">
            <v-card>
              <v-card-title>
                <span class="headline">{{ formTitle }}</span>
              </v-card-title>
              <v-card-text>
                <v-form ref="replyForm" v-model="isFormValid" lazy-validation>
                  <v-text-field v-model="editedReply.reply" label="reply" required></v-text-field>
                </v-form>
              </v-card-text>

              <v-card-actions>
                <v-spacer></v-spacer>
                <v-btn color="primary" text @click="close">Cancel</v-btn>
                <v-btn
                  color="primary"
                  @click.prevent="handleSubmit"
                  :disabled="!isFormValid || isProcessing"
                  :loading="isProcessing"
                >Save</v-btn>
              </v-card-actions>
            </v-card>
          </v-dialog>

и 

handleReply(id) {
      this.dialog = true;
      this.editedReply.comment_id = id;
    },    
handleSubmit() {
       this.isProcessing = true;
       axios
          .post(`/replies`, { reply: this.editedReply })
          .then(res => {
          this.isProcessing = false;
          const newEntry = res.data.reply;
          this.replies.push(newEntry);
          this.dialog = false;
},

Здесь this.editedReply представляет состояние всех параметров, которые: 

editedReply: {
    reply: null,
    comment_id: null,
    name: JSON.parse(localStorage.getItem("user")).name,
    email: JSON.parse(localStorage.getItem("user")).email
}

, мы получаем идентификатор комментария от handleReply метод.

спасибо :)

...