Can Vue js Toggle Between CSS Classes?

I am working with vuejs and I want to dynamically change the class based on the data value. If the number is negative, I need to apply the .neg class, and if it's positive, I need to use the .pos class.

Everything is functioning properly, except for applying the class.

The data set includes values like: 5, -7, 8, -2, 4, -9 etc

myArray: function () {
  var test =  [5, -7, 8, -2, 4, -9];
  return test;
},

<div v-for="data in myArray">
  <div v-bind:class="{'neg': data < 0, 'pos': data > 0}"></div>
  <div id="my">{{ data }}</div>
</div>

.pos {background-color: green;}
.neg {background-color: red;}

Any assistance would be greatly appreciated.

Answer №1

Considering that myArray is returning a value in the form of an array, it should be replaced with myArray()

<div v-for="data in myArray">
  <div :class="{'neg': data < 0, 'pos': data > 0}"></div>
  <div id="my">{{ data }}</div>
</div

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

Tips for positioning elements in p:selectOneMenuAnswer: Tricks for arranging items

I am looking to align the "components" of a PrimeFaces SelectOneMenu to the right in order to match the overall appearance of a form. While I have successfully aligned the selectItems, the selected option seems to have some offset issue. Is there a way to ...

Problem with Angular Slider

I'm in the process of creating a carousel component in Angular, but I'm facing an issue where the carousel is not appearing as it should. Below is the code for my carousel component. carousel.component.html: <div class="carousel"> ...

The MUI text input is failing to span the full width of the input field; it abruptly stops halfway through

It's difficult to articulate, but here is an image illustrating the issue: here the input stops The developer tools are displaying:edge dev tools I am using the Material UI Input component with React, and for some unknown reason, the text cursor hal ...

"Learn the simple process of transferring the value of a hidden input to the data() property of a Vue

.html: <div id="app"> <input type="hidden" name="data" value="Hello" id="data"> </div> script: new Vue({ el: "#app", data() { return { someData: "", ...

HR | extends all the way down the table, creating a vertical boundary

I am currently working on developing an Email Signature Generator. My goal is to extend the blue line (visible in the program) all the way down without affecting the layout of other elements. I suspect that because everything is contained within a table, a ...

Send data to a route without requiring URL parameters

I am looking for a way to send data to a route without explicitly defining the parameter in the URL path. While I have managed to achieve this by using query parameters, I prefer not to display them in the URL. It seems that this is indeed possible based ...

Modifying CSS dynamically is ineffective on Chrome

My webpage is experiencing a large left margin due to a global style sheet that cannot be modified. The margin is inline and cannot be changed in my print style. I found a jQuery solution that works in Firefox and IE, but unfortunately not in Chrome. jquer ...

What is the best way to use flexbox to occupy the remaining height and align in the center of the screen?

I'm facing a challenge in setting the login container at the center of the screen while occupying the remaining height. It seems that using justify-content aligns the content in the center, but despite setting the container's height to 100%, alig ...

Is there a way to access a child component's method from the parent component using ref in Vue3?

I am encountering an issue while attempting to call the child method from the parent component in vue3 using the ref method. Unfortunately, an error is being thrown. Uncaught TypeError: addNewPaper.value?.savePaper is not a function Displayed below is m ...

Place 2 unique keys into the specific cells of a bootstrap table template

Good Day! I am looking to multiply the values from two different fields in my code. Currently, I can only access and display one cell in the template but I want to perform a multiplication between two different cells. <b-table :items="this.data ...

Setting the width of an SVG element to match the width of the <text> element inside it

Within this JSFiddle project - https://jsfiddle.net/xtxd6r8t/ - there is an <svg> element containing text inside a <text> tag. Upon inspection of the <svg> and delving into the <text> element, it's noticeable that the width of ...

VSCode not displaying Typescript errors when using Vue 3 and Volar

Trying to utilize Typescript with Vue 3 in VSCode has been a bit of a challenge for me. Initially, I relied on the Vetur plugin for error highlighting, but it was a bit too eager and not recommended by official Vue 3 documentation. https://i.sstatic.net/ ...

What steps can I take to troubleshoot and fix the height of a div/span element?

Here is my HTML code: <div> <span style="display: inline-block;height:20px">20</span> <span style="display: inline-block;"><img src="img/ex.png"/></span> </div> The image I have in the second span is sized at ...

Concerns with the alignment of Bootstrap Carousel

I need help with positioning the bootstrap carousel properly. My goal is to have the slider appear as shown in the image below.https://i.sstatic.net/vAbad.jpg I've been struggling all day to figure out how to position my slider like the one in the im ...

Adding a CSS class to an ASP.NET page from the code-behind: A step-by-step

I have been searching through numerous sites and feel frustrated: Within my <asp:table id="questionsTable" runat="server">, I am dynamically adding rows and columns. My goal is to assign a predefined Cssclass to these newly created rows and columns, ...

A guide on toggling the visibility of a div based on media query conditions

This div should only be visible on mobile and tablet screens, not above 992px. <div class="nav-button but-hol"> <span class="nos"></span> <span class="ncs"></span& ...

Is the border length less than the width of the div element?

I came across this code snippet div { width: 200px; border-bottom: 1px solid magenta; height: 50px; } <div></div> The div has a width of 200px which causes the bottom border to also be 200px long. However, I am looking for a way ...

The bottom section of the webpage fails to follow the CSS height or min-height properties

Taking into account the question I raised earlier: How can a div be made to occupy the remaining vertical space using CSS? I received an answer which I have been experimenting with lately: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "htt ...

Populate div with straight lines running vertically or horizontally

I'm wondering how to create vertical or horizontal lines inside a div. I tried this in the past but lost the code, and searching for "fill div with lines" isn't giving me any relevant results. Here's an image to illustrate what I'm try ...

Unable to place text inside an image using Bootstrap

My issue pertains to text placement on images, which is behaving oddly in my code. The problem seems to stem from a hover system I have implemented, where the text only displays correctly when triggered by a hover event. My code snippet below addresses the ...