CODEWITHSUNDEEP
javascriptvue.js
Ulukbek Abylbekov
Ulukbek Abylbekov

Reputation: 459

v-if multiple conditions not working

<template>
<div>
    <h2>{{weatherData.city}}</h2>
    <h3>{{weatherData.weather}}</h3>
    <rain-cloud v-if="iconSelect==='09d'"/>
    <sun-cloud v-if="iconSelect==='04d'"/>
    <sunshine v-if="iconSelect=='01d'"/>
    <thunder-cloud v-if="iconSelect=='11d'"/>
    <windy-cloud v-if="iconSelect=='50d'"/>
    <snow-cloud v-if="iconSelect=='13d'"/>
    <div class="container">
        <h2>{{weatherData.temperature}}°C</h2>
        <h4>max temperature: {{weatherData.tempMax}}°C</h4>
        <h4>min temperature: {{weatherData.tempMin}}°C</h4>
        <h4>humidity: {{weatherData.humidity}}%</h4>
    </div>
</div>
</template>

computed:{
        iconSelect(){
            if(this.weatherData.icon==="04n" || "04d"){
                this.weatherData.icon="04d"
            }
            else if(this.weatherData.icon==="01d"|| "01n"){
                this.weatherData.icon="01d"
            }
            else if(this.weatherData.icon==="11d"|| "11n"){
                this.weatherData.icon="11d"
            }
            else if(this.weatherData.icon==="50d"|| "50n"){
                this.weatherData.icon="50d"
            }
            else if(this.weatherData.icon==="13d"|| "13n"){
                this.weatherData.icon="13d"
            }
            else if(this.weatherData.icon==="09d"||"09n"||"10d"||"10n"){
                this.weatherData.icon="09d"
            }
            return this.weatherData.icon
 }

Every component is SVG animation. I want to render only one when statement is true. But v-if doesn't support multiply conditions. Any ideas? every weather has icon code for example "01d" and "01n" mean it is clear during the day and during the night. But I have to use only one SVG

Upvotes: 2

Views: 8580

Answers (1)

ryanm
ryanm

Reputation: 451

v-if does support multiple conditions - for instance, assume you have:

new Vue({
  el: '#app',
  data: {
    x: 1,
    y: 2
  }
})

You would be able to write statements such as:

<div v-if="x === 1 || y === 3">
...
</div>

Vue also provides the v-else-if="condition" and v-else directives.

There's also a problem in your conditions within iconSelect(). You've written your conditions in the following format: if(this.weatherData.icon === "04n" || "04d")

This condition will always evaluate to true, because even when weatherData.icon === "04n" is false (weatherData.icon is set to some other value), the 2nd expression "04d" is evaluated - and it evaluates to "04n", which in the context of a conditional, is equivalent to true.

For these conditions to work as you're expecting them to, they should be in the following format:

if(this.weatherData.icon === "04n" || this.weatherData.icon === "04d")

Or, within your <template>, you would need to change your v-if conditions similarly:

<sun-cloud v-if="iconSelect === '04d' || iconSelect === '04n'"></sun-cloud>

Upvotes: 5

Related Questions