cssd-back/resources/js/vue/views/AddMedicalCenter.vue

<template>
  <v-form ref="form">
    <v-container grid-list-xs>
      <material-card class color="black" title="Add Medical Center" text>
        <v-layout row wrap class="px-5 mb-3">
          <v-flex xs12 md3 xs3>
            <v-text-field
              v-model="name"
              label="Name"
              color="black"
              class="pa-2"
              :rules="[rules.required, rules.counter]"
            ></v-text-field>
          </v-flex>
        </v-layout>
        <v-layout row wrap align-center justify-center class="mt-3">
          <v-btn class="WM-CyanBlueGradient-BG" @click="AddMedicalCenter" style="padding:10px 60px">
            <v-icon class="white--text mr-2 caption">fas fa-plus</v-icon>
            <span class="white--text">Add</span>
          </v-btn>
          <router-link to="/manage-medical-center">
            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
              <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
              <span class="black--text">Back</span>
            </v-btn>
          </router-link>
        </v-layout>
      </material-card>
    </v-container>
  </v-form>
</template>
<script>
import { ApiService } from "@/services";
import { log } from "util";
export default {
  data() {
    return {
      name: "",
      rules: {
        required: value => !!value || "Required.",
        counter: value => value.length <= 30 || "Max 30 characters"
      }
    };
  },
  methods: {
    async AddMedicalCenter() {
      let url = "MedicalCenters";
      let data = {
        name: this.name
      };
      if (this.$refs.form.validate()) {
        const result = await ApiService.post(url, data);
        if(result && result.status == 200) {
            this.$router.push('/manage-medical-center');
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
</style>