script bug

<template>
    <Page>
        <ActionBar>
            <GridLayout width="100%" columns="auto, *">
                <!-- <Label text="MENU" @tap="$refs.drawer.nativeView.showDrawer()" col="0"/> -->
                <Label class="title" text="Attendance App" align="center"  col="1"/>
            </GridLayout>
        </ActionBar>

        <RadSideDrawer ref="drawer">
            <StackLayout ~drawerContent backgroundColor="#ffffff">
                <Label class="drawer-header" text="Coming Soon"/>
            </StackLayout>

            <GridLayout v-if="attendanceData.img != '' " ~mainContent columns="auto,*" rows="auto,*">
                <Image :src="attendanceData.img" class="attendance-image" stretch="none" col="1" row="1" />
                <Label class="message" :text="attendanceData.time" col="0" row="2"/>
                <Label class="message" :text="`${attendanceData.location.latitude} - ${attendanceData.location.longitude}`" col="1" row="3"/>
            </GridLayout>
            <GridLayout v-else ~mainContent column="auto,*" rows="auto,*">
              <StackLayout row="1">
                <Button text="Button" @tap="cameraClick()" class="main-button" />
              </StackLayout>
            </GridLayout>
        </RadSideDrawer>
    </Page>
</template>
<script>
import { Image } from "tns-core-modules/ui/image";
const Toast = require("nativescript-toast");
import * as camera from "nativescript-camera";
import { isEnabled, enableLocationRequest, getCurrentLocation, watchLocation, distance, clearWatch } from "nativescript-geolocation";
export default {
    data() {
      return {
        msg: 'Please Sign Your Attendance',
        attendanceData : {
        location: '',
        img: '',
        time: ''
      }
      }
    },
    methods: {
      cameraClick : () =>{
        this.location = isEnabled().then(function (isEnabled) {
          if (!isEnabled) {
            var location = getCurrentLocation({desiredAccuracy: 3, updateDistance: 10, maximumAge: 20000, timeout: 20000}).
            then(function(loc) {
              if (loc) {
                return loc
              }
            }, function(e){
              console.log("Error: " + e.message);
            });
          }
        }, function (e) {
          console.log("Error: " + (e.message || e));
        })
        camera
        .takePicture({ width: 150, height: 150, keepAspectRatio: false })
        .then(
          imageAsset => {
            this.img = imageAsset;
            this.time = new Date().getTime();
       
          },
          error => console.log(error)
        )
        .catch(err => {
          console.log("Error -> " + err.message);
        });
      },
    }
  }
</script>

<style scoped>
    ActionBar {
        background-color: #53ba82;
        color: #ffffff;
    }

    .title {
        text-align: center;
        text-transform: capitalize;;
    }

    .message {
        vertical-align: center;
        text-align: center;
        font-size: 20;
        color: #333333;
    }

    .drawer-header {
        padding: 50 16 16 16;
        margin-bottom: 16;
        background-color: #53ba82;
        color: #ffffff;
        font-size: 24;
    }

    .drawer-item {
        padding: 8 16;
        color: #333333;
        font-size: 16;
    }
    .main-button{
      background-color: #00a8ff;
      color: white;
      width: 200;
    }
    .main-button:active{
      background-color: #52b7bd;
    }
    .attendance-image{
      width: 300;
      height: 300;
    }
</style>