Vue.js show div when button is clicked and array populated

Question

Hi so i have a button which displays the weather for a specific place. I want the div containing the weather to display when the button has been clicked. I have mapped all the data from the api but i cannot get it to hide until the button is clicked. Also one of the array headers is '1h' how do i map that in my code?

<template>
    <div class="w-full flex flex-col items-center gap-12">
        <div class="flex md:flex-row flex-col justify-center items-center md:gap-12 gap-4 px-4">
            <h2 class="text-4xl md:w-2/4 text-center md:text-start font-semibold">Whats the weather like at here?</h2>
            <button type="button" @click="showWeather" class="text-4xl bg-white/30 px-5 py-3 md:py-2 rounded-sm border-2 border-white hover:scale-110" >Show Me</button>
        </div>
       <div class="flex flex-row justify-between gap-10"> <!--- weather info starts here needs to be hidden until button click--->
            <div class="text-3xl font-bold">
                <p>Currently</p>
                <p>{{weather.weather[0].description}}</p>
            </div>
            <img class="w-[80px]" v-bind:src="`https://openweathermap.org/img/w/${weather.weather[0].icon}.png`" />
            <div class="flex flex-col gap-2">
                <div class="flex bg-grey/50 px-3 py-1 gap-6">
                    <span class="flex gap-3 text-xl">
                        <p>Temp</p>
                        <p>{{Math.floor(weather.main.temp)}}&#xb0;c</p>
                    </span>
                    <span class="flex gap-3 text-xl">
                        <p>Visibility</p>
                        <p>{{Math.floor(weather.visibility / 1000)}}km</p>
                    </span>
                    <span class="flex gap-3 text-xl">
                        <p>Rain</p>
                        <p>{{weather.rain.1h}}</p> <!-- title 1h -->
                    </span>
                </div>
                <div class="flex bg-stone/50 px-3 py-1 gap-6">
                    <span class="flex gap-3 text-xl">
                        <p>Wind</p>
                        <p>{{Math.floor(weather.wind.speed)}}mph</p>
                    </span>
                    <span class="flex gap-3 text-xl">
                        <p>Wind Dir</p>
                        <p>{{weather.wind.deg}}&#xb0;</p>
                    </span>
                    <span class="flex gap-3 text-xl">
                        <p>Humidity</p>
                        <p>{{weather.main.humidity}}</p>
                    </span>
                </div>
            </div>
        </div>
    </div>
    
</template>

<script>
    export default {
        data() {
            return {
                api_key: '583cec8e67023fadbbfc71f95265b103',
                url_base: 'https://api.openweathermap.org/data/2.5/',
                location: 'lon=-1.5534757619068575&lat=53.792218178144196',
                weather: {},
            }
        },
        methods: {
            showWeather(){
                console.log("Test");
                fetch(`${this.url_base}/weather?${this.location}&units=metric&appid=${this.api_key}`)
                .then(res => {
                    return res.json();
                    }).then(
                        this.setWeather)
            },
            setWeather(results) {
                this.weather = results;
            },
        },
    }
</script>

<style lang="scss" scoped>

</style>

https://codesandbox.io/s/weather-vue-ztyc1y?file=/src/App.vue

Answer 1

Change the initial value of weather to null and add the

v-if="weather"

line 18 & 72

For the "1h" thing, you could use this

weather.rain["1h"]