Итак, я хотел бы передать широту и долготу в переменные ширины и высоты в "data ()", а не просто записывать их в html. Я попытался передать переменную через все эти функции, чтобы получить доступ к переменной, но это не сработало в функции showLocation(location)
.
<template>
<div class="app">
<div class="app-Inner">
</div>
<button @click="getLocation">VIEW YOUR LOCATION</button>
<div>{{ width }}</div>
<div class="location"></div>
<div class="map"></div>
</div>
</template>
<script>
import Home from './components/Home.vue';
import MainValues from './components/MainValues.vue';
import Form from './components/Form.vue';
import More from './components/More.vue';
export default {
name: 'App',
data() {
return {
width: 0,
height: 0,
};
},
methods: {
getLocation() {
const geo = navigator.geolocation;
if (geo) {
// eslint-disable-next-line
geo.getCurrentPosition(showLocation);
} else {
const divLocation2 = document.querySelector('.location');
divLocation2.innerHTML = 'error';
}
function showLocation(location) {
// edit: !!!
// here instead of sending location cords through innerHTML i
// want to assign them into variables "width" and "height" which
// are defined in "data()" function above.
// tried: this.width = location.coords.latitude, and
// also : this.length = location.coords.longitude
// !!!
const divLocation = document.querySelector('.location');
divLocation.innerHTML = `${location.coords.latitude} ${location.coords.longitude}`;
}
},
},
};
</script>