3 <div class="card" :class="item.class">
4 <a :href="item.url" :target="item.target" rel="noreferrer">
5 <div class="card-content">
7 <div v-if="image" class="media-left">
8 <figure class="image is-48x48">
9 <img :src="`http://openweathermap.org/img/wn/` + image + `@2x.png`" :alt="conditions" :title="conditions" />
12 <div v-if="item.icon" class="media-left">
13 <figure class="image is-48x48">
14 <i style="font-size: 35px" :class="['fa-fw', item.icon]"></i>
17 <div class="media-content">
18 <p class="title is-4">{{ item.location }}</p>
19 <p class="subtitle is-6">
20 <template v-if="item.subtitle">
23 <template v-else-if="api">
25 <span v-if="this.item.units == 'metric'">°C</span>
26 <span v-else-if="this.item.units == 'imperial'">°F</span>
32 <div class="tag" :class="item.tagstyle" v-if="item.tag">
33 <strong class="tag-text">#{{ item.tag }}</strong>
64 return parseInt(this.api.main.temp).toFixed(1);
70 return this.api.weather[0].icon;
74 conditions: function () {
76 return this.api.weather[0].description;
85 fetchStatus: async function () {
86 const url = `${this.item.url}?q=${this.item.location}&appid=${this.item.apiKey}&units=${this.item.units}`;
87 this.api = await fetch(url)
88 .then((response) => response.json())
89 .catch((e) => console.log(e));
95 <style scoped lang="scss">