Salve, estou tendo problemas para conseguir coletar os dados de uma API de clima. Meu objetivo é coletar boa parte dos dados de chuva e para isso estou usando Vue Axios mas não consigo coletar nada pois mesmo após mudar o código o mesmo erro continua.
Código:
new Vue({
el: '#app',
data() {
return {
info: null,
loading: true,
errored: false
}
},
filters: {
currencydecimal(value) {
return value.toFixed(2)
}
},
mounted() {
axios
.get('http://apiadvisor.climatempo.com.br/api/v1/forecast/locale/6731/days/15?token=5ffc1cd67c7deb0d259d9388ea9db118')
.then(response => {
this.info = response.data.rain
})
.catch(error => {
console.log(error)
this.errored = true
})
.finally(() => this.loading = false)
}
})
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<div id="app">
<h1>Chuvas</h1>
<section v-if="errored">
<p>Pedimos desculpas, não estamos conseguindo recuperar as informações no momento. Por favor, tente novamente mais tarde.</p>
</section>
<section v-else>
<div v-if="loading">Carregando...</div>
<div v-else v-for="currency in info" class="currency">
{{ currency.probality }} {{ currency.precipitation }}
</div>
</section>
</div>
Como sou novo com a linguagem não tenho total conhecimento sobre ela, então desculpem qualquer bobagem haha.
Obrigado.