NUXT_FRONTEND/pages/admin/sliders/slider-create/index.vue

<template>
  <v-form max-width="400px" class="form-module">
    <v-text-field v-model="module.name" label="Название слайдера"> </v-text-field>
    <v-checkbox
      max-width="400"
      v-model="module.activity"
      label="Показывать слайдер"
    ></v-checkbox>
    <v-img :src="'https://api.amic.ru/'+img.relative_path"></v-img>
    <v-row>
      <v-col>
          <h4>Начало активности</h4>
        <v-date-picker v-model="date" no-title scrollable>
          <v-spacer></v-spacer>
          <v-btn text color="primary" @click="menu = false"> Cancel </v-btn>
          <v-btn
            text
            color="primary"
            @click="$refs.menu.save(startActivity.date)"
          >
            OK
          </v-btn>
        </v-date-picker>
        <vue-timepicker v-model="time" format="HH:mm:ss"></vue-timepicker>
      </v-col>
      <v-col>
          <h4>Конец активности</h4>
        <v-date-picker v-model="endDate" no-title scrollable>
          <v-spacer></v-spacer>
          <v-btn text color="primary" @click="menu = false"> Cancel </v-btn>
          <v-btn
            text
            color="primary"
            @click="$refs.menu.save(startActivity.date)"
          >
            OK
          </v-btn>
        </v-date-picker>
        <vue-timepicker v-model="endTime" format="HH:mm:ss"></vue-timepicker>
      </v-col>
    </v-row>
    <v-btn @click="createModule">Создать слайдер</v-btn>
  </v-form>
</template>

<script>
import VueTimepicker from "vue2-timepicker";
import "vue2-timepicker/dist/VueTimepicker.css";
export default {
  layout: "admin",
  components: {
    VueTimepicker,
  },
  data() {
    return {
      module: {
        activity: true,
        type: "slider",
        name: "",
        start_activity: "",
        end_activity: "",
      },
      img: {},
      endTime: "",
      endDate: "",
      date: "",
      time: "",
    };
  },

  async asyncData({ $axios }) {
    const containers = await $axios
      .get("/admin/containers/type_slider")
      .then((res) => {
        return res.data.data;
      });
    return { containers };
  },
  methods: {
    createModule() {
        this.$axios.post("admin/containers/create", {
            type: "slider",
            name: this.module.name,
            start_activity: this.start_activity,
            end_activity: this.end_activity,
            activity: this.module.activity
        })
    }
  },
  computed: {
      start_activity() {
        return this.date + " " + this.time;
      },
      end_activity() {
          return this.endDate + ' ' + this.endTime
      }
    },
};
</script>

<style lang="less">
.form-module {
  margin: 0 auto;
  max-width: 800px;
  width: 100%;
}
</style>