demo.js

import axios from 'axios';
require('malihu-custom-scrollbar-plugin')($);  
import config from '../../config';

export default {
  name: 'weather',
  data: () => ({
    location: {},
    weather: {},
    cities: [],
    cityName: '',
  }),
  mounted: async function () {
    this.location = await this.getLocation();
    this.location = {...this.location.data};
    this.cities.push({ title: this.location.city, region: this.location.region},);
    this.cities.map(async (item) => {
      let weather = await this.getWeather(item);
      weather = weather.data;
      item.weather = weather;
      return item;
    });
    setTimeout(() => {
      $('.test').mCustomScrollbar({
        axis:"x"
      });
    }, 0);
  },
  methods: {
    getLocation: () => (axios.get(config.services.ipInfo.url)),
    getWeather: location => {
      const url = config.services.openWeatherMap.url;
      const apiKey = config.services.openWeatherMap.apiKey;
      return axios.get(`${url}/data/2.5/forecast/daily?q=${location.city}&appid=${apiKey}`);
    },
    parseWeatherData: weather => {
      return weather.list.map(item => {
        item.temp.avg = (item.temp.morn + item.temp.eve + item.temp.day + item.temp.night) / 4;
        item.dt = item.dt * 1000;
        item.date = new Date(item.dt);
        item.weekDay = item.date.getDay();
        item.monthDay = item.date.getDate();
        return item;
      });
    },
    addCity: function() {
      this.cities.push({title: cityName});
      this.cityName = '';
    },
  },
};