Vue native Geolocation Error _expo.Permissions.askAsync undefined

Question

I have been learning out Vue Native for sometime. I was ging throug the documentation that is provided in https://vue-native.io and trying out one by one. And when I came to Geolocation section I wanted to tryout the expo permision api. And I'm getting this error

undefined is not an object (evaluating '_expo.Permissions.askAsync')

Here is my code

 <template>
  <view class="container">
    <text>Location:</text>
    <text>{{location.latitude}}</text>
    <touchable-opacity :on-press="getLocation" >
        <text>get location</text>
    </touchable-opacity>
  </view>
</template>

 <script>

import { Constants, Location, Permissions } from "expo";

export default {
  data: function() {
    return {
      location: {},
      errorMessage: ""
    };
  },
  methods: {
    getLocation: function() {
      Permissions.askAsync(Permissions.LOCATION).then(status => {
        if (status !== "granted") {
          errorMessage = "Permission to access location was denied";
        }
        Location.getCurrentPositionAsync({}).then(location1 => {
          location = location1;
        });
      }).catch((err)=>{
        console.log(err);
     });
    }
  }
};
</script>
<style>
.container {
  background-color: white;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.text-color-primary {
  color: blue;
}
</style>

The error must be from getLocation Function and related to expo permission. Could you please let me know what might be the issue here? Thanks

Answer 1

Try this:

const _this = this;
Permissions.askAsync(Permissions.LOCATION)
    .then( status => {
        if (status !== "granted") {
            errorMessage = "Permission to access location was denied";
        } else {
            _this.Location.getCurrentPositionAsync()
               .then(location1 => {
                  _this.location = location1;
               })
        }
    })
    .catch( error => { console.log('error');})