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

Different ways to send data from JavaScript to Python using the 'POST' method

I have this specific section of code from my GAE application that utilizes webapp2 framework to receive data from a form through the post method. class RenderMarksheet(webapp2.RequestHandler): def post(self): regno = self.request.get('content ...

javascriptpythonajaxpostwebapp2

Use jQuery to switch the class of the designated DIV in the showcasing slider

Check out this jQuery slider example where I have two Divs - DIV ONE and DIV TWO. Can you help me figure out how to: 1) Automatically change the class of DIV ONE from "test" to "testc" when Slide 1 is displayed by the slider. 2) Automatically update DIV ...

javascriptjqueryhtmlcss

Simultaneously activate the top and bottom stacked components by clicking on them

One of my components has two child components, A and B. Component A is set to position: absolute and placed on top of component B like an overlay. Additionally, component A has a higher z-index. Both components have onClick events attached to them. My que ...

javascriptreactjsreact-nativeevent-handlingclick

Accordion component in Vue 3 using Composition API and making API calls

For my Vue 3 Composition API app, I created a custom accordion component and a custom tabs component based on Bootstrap. The Tab component expects the following props: label Icon Component to render The accordion component follows the same structure. E ...

vue.jsbootstrap-5

How can we call a function in HTML from an external JavaScript file?

I am attempting to utilize a function that I have defined in my .js file within my HTML document. js/newsalerts.js function decodeHTML(html) { //https://stackoverflow.com/a/2989105/4650297 var tempDiv = document.createElement("DIV"); tempDiv. ...

javascripthtmlflask

What exactly does Apple consider as a "user action"?

In the midst of my current web project, I am facing a challenge with initiating video playback after a swipe event. Despite utilizing the HTML5 video player and JavaScript to detect swipes, I have encountered difficulties in achieving this functionality. I ...

javascriptioshtmlvideo

The error message states: "Cannot create element as the React object is not

Recently delving into the world of React and Material UI, I've been working on creating an AppBar with nested Tabs. Here's a snippet of my current approach: import {React, PropTypes, Component} from 'react'; import TodoTextInput from & ...

javascriptreactjstabsmaterial-uiappbar

What is the best way to display JSON response as code instead of a string in AngularJS?

When retrieving my article from the database as a JSON object, I encounter an issue with the body content. The HTML codes in the body are displayed as strings within double quotation marks by AngularJS. How can I resolve this? Angular controller snippet: ...

javascripthtmlangularjsjsonstring

Finished drawing remains on the iPad canvas within the browser

When it comes to clearing sketches on a canvas, I am experiencing some confusion. Despite successfully clearing the sketch from the canvas, as soon as I click to draw something new, the cleared sketch reappears in its original position. It seems like the ...

javascriptjqueryipadcanvas

Components from Bower are currently not available

Trying to automate the injection of bower components into my HTML using grunt-wiredep. It seems simple enough, but I'm having trouble setting the correct path to the bower directory when running localhost. Currently, I'm receiving this error: ht ...

javascripthtmlgruntjsbowergrunt-wiredep

Discovering the final step of a for loop when working with JavaScript objects

Currently, my data consists of: {12: Object, 13: Object, 14: Object} I need help figuring out how to detect the final iteration in the for loop below: for (var i in objs){ console.log(objs[i]); } Does anyone have any solutions? ...

javascriptjquery

The date-fns parse function will retrieve the value from the previous day

When attempting to parse a date using the date-fns library, I am encountering an issue where the resulting date is one day prior. How can this be resolved in order to obtain the correct result? start = '2021-08-16' const parseStart = parse(start, ...

javascriptnode.jsreactjsexpressdate-fns

Issue with Javascript redirect not working following form submission in combination with Asp Classic

After countless hours of research and experimentation, I find myself at a standstill. My web page is coded extensively, so I'll do my best to provide a concise summary. The core elements of my ASP CLASSIC page for creating tickets via a form are as f ...

javascripthtmlasp-classic

How can I install fs and what exactly does it do in JavaScript?

As a beginner in the world of JavaScript, I am struggling with what seems like a basic issue. In my journey to develop some JavaScript code and utilize sql.js, I keep encountering an error at this line: var fs = require('fs'); This error is due ...

javascriptnode.jsfs

Get the PDF document via FTP by utilizing an XMLHttpRequest and a generic handler

Attempting to download a PDF file from an FTP server using a JQuery Ajax request. The reference used was found at . Below is the Jquery ajax call being made: $.ajax({ xhr: function () { var xhr = new window.XMLHtt ...

javascriptc#jqueryasp.netajax

Converting JSON to JavaScript Date using UTC time

I am struggling with formatting the dates in a JSON object to work with highcharts. The JSON looks like this: [ [ "26-Sep-14", 10 ], [ "29-Sep-14", 75 ] ] Highcharts requires dates to be in the format Date. ...

javascriptpythonjsonhighcharts

I encountered an issue while using the tab bar feature in Bootstrap where I wasn't able to navigate back to the first tab or any

My current project involves JavaScript, and I integrated a Bootstrap tab bar component. However, when I try to run the code in Google Chrome, I encounter an issue. The first time I select the first tab, the content displays correctly. But when I select the ...

javascriptjquerybootstrap-4navigationtabbar

The disappearing act: Nativescript-vue's native iOS Navigation button vanishes when setting the title on ActionBar

When I utilize a plain ActionBar: <ActionBar/> and then navigate with: this.$navigateTo(Catalog) the default iOS Back button appears as expected. However, when I modify the action-bar like this: <ActionBar title="some title"/> or add othe ...

iosvue.jsnativescriptnativescript-vue

Replace the default focus state using CSS or resetting it to a custom style

I'm looking for a solution similar to a CSS reset, but specifically for the :focus state. If such a thing doesn't exist yet, I'm interested in learning about the possible properties that can be reset or overridden in order to create a new :f ...

javascripthtmlcssfocus

Altering Image Order Across Various Slides

I have customized a parallax website template that is divided into various sections and slides. I want to incorporate a fixed image sequence on each slide that animates based on the scroll position. With 91 images in the animation sequence, it moves quickl ...

javascriptjqueryhtmlcss