Cannot get v-if to work with multiple conditions

<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
 }

Each SVG animation component represents a different weather type, and only one should be rendered based on the conditions. Is there a way to achieve this with v-if, considering that each weather condition has a specific icon code that needs to be handled appropriately?

javascriptvue.js

Answer №1

v-if allows for the use of multiple conditions. For example, let's say you have:

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

You can then write conditional statements such as:

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

In addition to v-else-if="condition", Vue also offers the v-else directive.

There seems to be an issue in your conditions within iconSelect(). The conditions are currently written as follows: 

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

This particular condition will always return true, because even if weatherData.icon === "04n" is false (weatherData.icon has a different value), the second expression "04d" gets evaluated - and it results in "04n", which in a logical context, is considered true.

To achieve the desired behavior with these conditions, they should be written like this:

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

Alternatively, within your <template>, you would need to adjust the v-if conditions accordingly:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Requesting for a template literal in TypeScript:

Having some trouble with my typescript code, it is giving me an error message regarding string concatenation, const content = senderDisplay + ', '+ moment(timestamp).format('YY/MM/DD')+' at ' + moment(timestamp).format(&apo ...

javascripttypescript

A guide to resolving the issue of invalid objects as a React child in Nextjs13

Seeking help on resolving an issue in Nextjs13, where I'm encountering the error "objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead" The scenario involves fetching ...

javascriptreactjsnext.jsnext.js13

Image flipping effect malfunctioning in Safari and Internet Explorer

My image flipping effect is not functioning properly in Safari and IE browsers. Here is the code I am using: .flipcard { position: relative; width: 220px; height: 220px; perspective: 500px; margin: auto; text-align: center; } .flipcard.v:hove ...

javascriptjqueryhtmlcss

Tips on creating adaptable images for mobile viewing

My coding conundrum involves the use of two columns - one for an image and the other for a description of that image. However, when viewing my site on mobile devices, the image is cut off at only half its height. Adjusting both columns to col-sm-6 results ...

javascripthtmlcss

Easy steps for importing node modules in TypeScript

I'm currently navigating the world of TypeScript and attempting to incorporate a module that is imported from a node module. I have chosen not to utilize webpack or any other build tools in order to maintain simplicity and clarity. Here is the struct ...

javascriptnode.jstypescriptnpmes6-modules

Why does Visual Studio Code auto-complete "ImagePropTypes" when typing a dot after "props"?

Currently following a React Native tutorial with Visual Studio Code. Using Babel Javascript as my selected language mode. Encountering an issue when typing Line 7: https://i.stack.imgur.com/WcV7B.png After adding a period (.) to props, it changes to Ima ...

javascriptreactjsvisual-studio-code

Tips for ensuring v-tabs-items and v-tab-item fill height

I found an example that I am trying to follow at the following link: https://vuetifyjs.com/en/components/tabs#content <v-tabs-items v-model="model"> <v-tab-item v-for="i in 3" :key="i" :value="`tab-${i}`" > < ...

cssvue.jsvuetify.js

JavaScript Filtering Technique

Attempting to compose an array of names for a search output page The json arrangement looks like this: data = { "artists": [ { "artistName": "a" }, { "artistName": "b" }, { "artistName": "c" }, { "artistName": "d" }, { "artistName" ...

javascriptarraysfilter

Crafty Checkbox Selector [ leveraging jquery ]

I have created some fake checkboxes using elements like <span> after the real checkbox and they are working fine! However, I am having trouble counting the checked checkboxes when a checkbox is clicked. I have tried using methods like: $(".elm:chec ...

javascriptjqueryhtmlcss

automatically collapse a submenu once a different menu option is selected

After doing some research and trying out various solutions, I still couldn't get it to work. I made adjustments to my dropdown menu and click function so that each submenu opens and closes when its parent is clicked. However, I'm now looking to f ...

javascripthtmlcssreactjsnext.js

What is the best way to showcase a JSON object in an attractive format on a webpage?

Similar Question: JavaScript data formatting/pretty printer var theobject_string = '{...}'; // I have a JSON object as a string. Is there a way to present this string in a visually appealing manner on an HTML webpage? I would like the ...

javascripthtmlcssjsontemplates

Unending cycle occurs when utilizing a computed property alongside Vue Chart js

My goal is to refresh my chart with new data from an API call every 5 seconds. However, the chart is updating excessively, rendering each point hundreds of times. After checking the logs, I discovered that there seems to be an infinite loop causing this is ...

javascriptvue.jsvue-chartjs

AngularJS: Modifying values in one div updates data in all other divs

The webpage appears as shown below: HTML <li class="list-group-item" ng-repeat="eachData in lstRepositoryData"> <div class="ember-view"> <div class="github-connection overflow-hidden shadow-outer-1 br2"> <!-- ...

javascripthtmlangularjs

Tips for persisting form values even after refreshing the page - a guide to setting form values that stay in place

When I submit a long form, an external JavaScript validation is triggered to check the input field validity. If all fields pass validation, a jQuery modal appears prompting the user to either register or log in. If the user chooses to register and complet ...

phpjavascriptjquery

What is the best way to manage a significant volume of "business" data or objects within my JavaScript project?

I specialize in working with AngularJs and have a factory that provides services related to buildings. I am managing a large number of buildings (around 50-60) with multiple properties and sub-properties associated with each one (approximately 15-20, some ...

javascriptangularjs

Retrieving data from a <span> element within a webpage created using ReactJS

I am completely new to the world of web design and development, so there may be some mistakes in my request. Essentially, I have a webpage that contains numerous span tags like the following example: These span tags are part of a significantly large DOM t ...

javascripthtmldomreactjs

What is the time stamp format of 1651928421543667000?

Recently, I have encountered an issue with an API returning a timestamp as 1651928421543667000. Despite trying various PHP functions like strtotime(), datetime(), and strftime(), I am unable to find the correct format for it. Can anyone provide some guid ...

javascriptphpjsontimestampunix-timestamp

Ensuring the validity of input tags

I encountered an issue with an input tag that has a specific logic: https://codepen.io/ion-ciorba/pen/MWVWpmR In this case, I have a minimum value retrieved from the database (400), and while the logic is sound, the user experience with the component lea ...

javascripthtmljquerycss

React State not refreshing

Currently tackling a challenging e-commerce project and facing an obstacle with the following component: import React, { useEffect, useState } from 'react'; const Cart = () => { let [carts, setCarts] = useState([]); let [price, se ...

javascriptreactjsreact-hooks

Utilizing $store in field callback with VueJS and vue-form-generator

I've been utilizing the vue-form-generator component to work on my project. My goal is to update a variable in the store using the response from a callback function. Below is what I think is the relevant code (found inside the schema:fields property): ...

vue.js