Fungsi Dasar di Halaman Vue.js

<template>
    <div class="row">
      <b-tabs pills card>
        <b-tab title="Pengguna" active>
          <div class="row clearfix">
            <div class="col-sm-8" style="width: 1000px">
                <div class="form-group form-float">
                    <base64-upload class="img-fluid" imageSrc="uploads.png" @change="onChangeImage" >Upload photo</base64-upload>
                </div>
                <div class="form-group form-float">
                    <label class="form-label" style="color: black;">Email</label>
                    <input v-model="users.Email" type="text" name="EmployeeID" required maxlength="32" minlength="2" class="validate form-control" style="border: 1px solid black;">
                </div>
                <div class="form-group form-float">
                    <label class="form-label" style="color: black;">Username</label>
                    <input v-model="users.UserName" type="text" name="EmployeeID" required maxlength="32" minlength="2" class="validate form-control" style="border: 1px solid black;">
                </div>
                <div class="form-group form-float">
                    <label class="form-label" style="color: black;">Password</label>
                    <input v-model="users.Password" type="text" name="EmployeeID" required maxlength="32" minlength="2" class="validate form-control" style="border: 1px solid black;">
                </div>
                <div class="form-group form-float">
                    <label class="form-label" style="color: black;">Role</label>
                    <vue-select v-model="selectedRole" class="vue-select2" name="role" :options="role" label="Name"></vue-select>
                </div>
                <div class="form-group form-float">
                    <label class="form-label" style="color: black;">Link dengan Data Karyawan</label>
                    <vue-select v-model="selectedEmployee" class="vue-select2" name="role" :options="employee" label="Name"></vue-select>
                </div>
            </div>
          </div>
          <div class="row">
             <button v-on:click="save()" class="btn btn-success">Simpan</button>
             <router-link :to="{ name: 'UserManagement.index' }" class="btn btn-default">Batal</router-link>
          </div>
        </b-tab>
      </b-tabs>
    </div>
</template>

<script>
// Plugins
import moment from 'moment'
import $ from 'jquery'
import VueSelect from 'vue-select'
import 'vue-select/dist/vue-select.css'
import Base64Upload from 'vue-base64-upload'

// API
import Users from '@/services/UsersManagements/Users'
import Role from '@/services/UsersManagements/Roles'
import LegalEntity from '@/services/Companies/LegalEntities'
import Branch from '@/services/Companies/Branches'
import Employee from '@/services/Employee/Employee'

export default {
  name: 'UserManagement.create',
  components: {
      VueSelect,
      Base64Upload
  },
  data () {
    return {
      // Scope, Sama kyk vm.users , vm.employee dkk
      userData: localStorage.userData !== undefined,
      users: {},
      legalEntity: {},
      branch: {},
      role: {},
      employee: {},
      selectedRole: {},
      selectedEmployee: {}
    }
  },
  beforeUpdate: function () {
    // Ngeassign variable pada saat proses update, misal kyk dropdown
    this.users.RoleId = this.selectedRole.Id
    this.users.EmployeeId = this.selectedEmployee.Id
  },
  mounted: function () {
    // Sama dengan document.ready
    window.$ = $
    if (!this.userData) {
      this.$router.push({ name: 'home' })
      location.reload()
    }
    this.init()
  },
  methods: {
    // Kumpulan Fungsi disini
    init: async function() {
        // Ngeload Data Dari API
        let role = await Role.index()
        let legalEntity = await LegalEntity.index()
        let branch = await Branch.index()
        let employee = await Employee.index()

        // Assign data ke Scope
        this.role = role.data
        this.legalEntity = legalEntity.data
        this.branch = branch.data
        this.employee = employee.data
    },
    save: async function() {
        // Fungsi Save Data
        console.log(this.users)
        try {
            let result = await Users.create(this.users)
            if(result.status == 200) {
                alert(result.data.msg)
                this.$router.push({ name: 'UserManagement.index' })
                location.reload()
            } else {
                alert("Registrasi Gagal")
                console.log(result)
            }
        } catch (error) {
            alert("Error : " + error)
        }
    },
    onChangeImage(file) {
        // Ngeassign File Foto
        console.log(file)
        this.users.picture1 = file.base64
    },
    formatDate(time) {
      // Format Tanggal
      var formattedTime = moment(time).format('DD MMMM YYYY HH:mm')
      if(formattedTime == 'Invalid date') {
        formattedTime = '-'
      }
      return formattedTime
    }
  }
}
</script>