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 >
        <div >
            <h2 >Whats the weather like at here?</h2>
            <button type="button" @click="showWeather"  >Show Me</button>
        </div>
       <div > <!--- weather info starts here needs to be hidden until button click--->
            <div >
                <p>Currently</p>
                <p>{{weather.weather[0].description}}</p>
            </div>
            <img  v-bind:src="`https://openweathermap.org/img/w/${weather.weather[0].icon}.png`" />
            <div >
                <div >
                    <span >
                        <p>Temp</p>
                        <p>{{Math.floor(weather.main.temp)}}&#xb0;c</p>
                    </span>
                    <span >
                        <p>Visibility</p>
                        <p>{{Math.floor(weather.visibility / 1000)}}km</p>
                    </span>
                    <span >
                        <p>Rain</p>
                        <p>{{weather.rain.1h}}</p> <!-- title 1h -->
                    </span>
                </div>
                <div >
                    <span >
                        <p>Wind</p>
                        <p>{{Math.floor(weather.wind.speed)}}mph</p>
                    </span>
                    <span >
                        <p>Wind Dir</p>
                        <p>{{weather.wind.deg}}&#xb0;</p>
                    </span>
                    <span >
                        <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

CodePudding user response：

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"]