Здравствуйте, товарищи! Помогите пожалуйста разобраться cо структурой во Vue.js приложении.
Есть два компонента. Первый называется
YandexMap (родительский), второй
Navbar (дочерний).
В компоненте YandexMap я инициализирую карту, делаю запрос к API через пакет axios по определенному url адресу и полученные результаты наношу на карту.
Сейчас возник вопрос. При нажатии кнопки в дочернем компоненте Navbar, мне нужно отправить данные (в моем случаи начальную и конечную дату) в родительский компонент YandexMap. Эти данные я хотел бы использовать в url адресе к API, чтобы построить новые гео-объекты. Как это сделать и насколько текущая организация кода правильная?
Второй вопрос при нажатии вышеупомянутой кнопку, мне нужно почистить яндекс карту, которая инициализирована в родительском компоненте. Как это сделать? Подскажите пожалуйста.
YandexMap.vue:<template>
<div>
<Navbar/>
<div id="yandex-map"></div>
<Preloader v-if="loading"/>
</div>
</template>
<script>
import axios from 'axios';
import Preloader from './Preloader.vue'
import Navbar from './Navbar.vue'
export default {
name: "YandexMap",
components: {
Preloader,
Navbar
},
data() {
return {
loading: false
start_date: "2018-10-01"
end_date:"2018-10-31"
}
},
mounted() {
// Установить скрипты для использования яндекс карты
let scriptYandexMap = document.createElement('script');
scriptYandexMap.setAttribute('src', 'https://api-maps.yandex.ru/2.1/?apikey=key&lang=ru_RU');
document.head.appendChild(scriptYandexMap);
// Инициализировать яндекс карту и установка гео-объектов на карте
scriptYandexMap.addEventListener("load", this.geoObjects);
},
methods: {
geoObjects() {
// Создаем карту
self.map = new ymaps.Map("yandex-map", {
center: [48.583213, 66.017493],
zoom: 5,
controls: ['zoomControl', 'searchControl', 'fullscreenControl' ],
searchControlProvider: 'yandex#search'
});
// Показать Preloader
self.loading = true;
// Выполняем запросы
axios.all([
axios.get('http://localhost:3000/api/markers?start_date=' + self.start_date + '&end_date=' + self.end_date),
axios.get('http://localhost:3000/api/polygons?start_date=' + self.start_date + '&end_date=' + self.end_date)
]).then(axios.spread(function (markers, polygons){
// Здесь опустил код, который наносит гео-объекты на карту
// Убираю Preloader, после того как все гео-объекты нанеслись на карту
self.loading = false;
}));
}
}
}
</script>
Navbar.vue:<template>
<b-navbar toggleable type="warning" variant="warning">
<v-date-picker class='v-date-picker'
mode='range'
v-model='range'
:show-day-popover=false
is-double-paned
show-caps>
</v-date-picker>
<b-button class="search-btn" v-on:click="search">
<font-awesome-icon :icon="faSearch"/>
</b-button>
</b-navbar>
</template>
<script>
import Vue from 'vue';
import VCalendar from 'v-calendar'
import 'v-calendar/lib/v-calendar.min.css';
import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
import faSearch from '@fortawesome/free-solid-svg-icons'
Vue.use(VCalendar);
export default {
name: "Navbar",
data() {
return {
range: {
start: null,
end: null
},
faSearch: faSearch
}
},
components: {
FontAwesomeIcon
},
methods: {
search: function () {
console.log(this.range.start); // Выбранное пользователем начальная дата
console.log(this.range.end); // Выбранное пользователем конечная дата
}
}
}
</script>
