NUXT_FRONTEND/pages/admin/comments/_id.vue

<template>
  <v-container class="spacing-playground" fluid>
    <v-row no-gutters>
      <v-col cols="8" class="col detail__main pa-6">
        <h2 class="mb-5">Редактирование комментария</h2>
        <div class="mb-5">
          <strong>Дата создания:</strong> {{ created_at }}
        </div>
        <div class="mb-5">
          <strong>Нужна модерация:</strong> {{ need_moderation ? 'Да' : 'Нет' }}
        </div>
        <div class="mb-5">
          <strong>Пользователь:</strong> {{ user_create }}
        </div>
        <v-textarea
          name="input-1"
          label="Комментарий"
          hint=""
          v-model="message"></v-textarea>
        <v-btn class="ml-auto mr-0 pa-6 my-6" @click="updateComment">Сохранить комментарий</v-btn>
      </v-col>

      <div v-if="result.length" class="message-box">
        <v-alert
          :key="i"
          class="message"
          :type="messageClass ? messageClass : 'primary'"
        >
          {{ result }}
        </v-alert>
      </div>
    </v-row>
  </v-container>
</template>

<script>
import VueTimepicker from "vue2-timepicker";
import "vue2-timepicker/dist/VueTimepicker.css";

export default {
  components: {
    VueTimepicker,
  },

  methods: {
    updateComment() {
      this.$axios.post("admin/comments/edit", this.commentItem).then((res) => {
        this.result = "Комментарий обновлен";
        if(res.data.success){
          setTimeout(() => {
            this.$router.push("/admin/comments");
          }, 500);
        }else{
          this.notificationHandler('Ошибка обновления комментария', true);
          return " ";
        }
      }).catch((err) => {
        this.notificationHandler('Ошибка обновления комментария', true);
        return " ";
      });
    },
    notificationHandler(message, error) {
      this.messageClass = false;
      this.result = message;
      if (error) {
        this.messageClass = "error";
      }
      const interva = setTimeout(() => {
        this.result = "";
      }, 10000);
    },
  },
  data() {
    return {
      messageClass: "",
      result: "",
      message: "",
      id: "",
      created_at: "",
      need_moderation: "",
      user_create: ""
    };
  },

  validations: {},

  layout: "admin",
  // Компьютед
  computed: {
    commentItem() {
      return {
        id: this.$route.params.id,
        message: this.message,
      };
    },
  },
  mounted() {
    this.$axios.$get("/admin/comments/item/" + this.$route.params.id).then((res) => {
      return res;
    }).then((res) => {
      this.message = res.data.message;
      this.created_at = res.data.created_at;
      this.need_moderation = res.data.need_moderation;
      this.user_create = res.data.user_create_for_admin && res.data.user_create_for_admin.first_name.length ? res.data.user_create_for_admin.first_name : 'Гость';
    });
  },
};
</script>

<style lang="less">

</style>