How to bind data from an api function into data object in vue.js

Question

I am performing a Axios.get() to a Weather API, in result i want to filter specific data of information about "current weather" etc.

<template lang="html">
  <div id="weather">
    {{weatherData}}

  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      weatherData: {
        stringSummary: this.weatherApi.data.currently.summary,
      },
    };
  },
  created() {
    this.weatherApi();
  },
  methods: {
    async weatherApi() {
      axios.get('https://api.darksky.net/forecast/
      89cef1a2abe989e0d09a4ebd75f02452/53.551085,-9.993682? 
      lang=de&units=si')
      .then((response) => {
        console.log(response);
        return response;
    })
    .catch((error) => {
      console.log(error);
    });
  },
},

};
</script>

Please check my "stringSummary" part inside Data. Shouldn't this work?

I am thankful for any help.

ittus · Accepted Answer · 2018-12-03 07:58:50Z

1

You should assign weatherData in then block:

methods: {
  async weatherApi() {
    axios.get('https://api.darksky.net/forecast/
    89cef1a2abe989e0d09a4ebd75f02452/53.551085,-9.993682? 
    lang=de&units=si')
    .then((response) => {
      this.weatherData = {
        stringSummary: response.data.currently.summary
      }
      return response;
  })
  .catch((error) => {
    console.log(error);
  });
},

answered Dec 3, 2018 at 7:58

ittus

22.5k5 gold badges62 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to bind data from an api function into data object in vue.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related