Searching for table row elements using CSS and Vue.js

I am trying to alternate row colors in a table, but for some reason all rows end up being gray.

  <table>    
    <tr v-for="i in item.env_vars" :style="{'background': index % 2 === 0 ? '#eee' : '#ccc' }">
      <td> test1 </td>
      <td> test2 </td>
      <td> test3 </td>
    </tr>
  </table>

However, I am encountering an error in Vue admin tool:

Property or method "index" is not defined on the instance but referenced during render.

Can anyone help me identify what is causing this issue in my code?

javascripthtmlcssvue.js

Answer №1

I don't have much experience with Vue, however, it seems like you should include an index variable in your loop:

<tr v-for="(i, index) in item.env_vars"

Answer №2

If you're looking to alternate background colors in a table, you can achieve this easily using the CSS :nth-child selector:

table {
  width: 100%;
}

tr:nth-child(odd) {
  background: #eee;
}

tr:nth-child(even) {
  background: #ccc;
}
<table>
  <tr>
    <td>hi</td>
  </tr>
  <tr>
    <td>hi</td>
  </tr>
  <tr>
    <td>hi</td>
  </tr>
  <tr>
    <td>hi</td>
  </tr>
</table>

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

How does a web crawler determine which elements to click on when navigating a webpage?

Recently, I developed a crawler application that is able to access a given webpage and extract the HTTP Requests before storing them in an excel sheet. Currently, I have implemented click events for some buttons using jQuery. Now, I am faced with the chal ...

c#javascriptjquery.netweb-crawler

How to Add Data from Another MongoDB Collection in Mongo/Meteor

I am looking to incorporate a document from one collection into another, specifically a UoM into Products. Template.NewProduct.helpers({ ... uoms: function() { return UoM.find(); }, ... }); Template.NewProduct.events({ //Submit and Add to ...

javascriptnode.jsmongodbmeteormeteor-blaze

Ensure that the Bootstrap image element maintains its full height without resizing

While working on my Angular application, I encountered an issue with designing a side list-group of recent blogs using Bootstrap 4. When the aspect ratio is changed to mobile view, the images resize and become smaller to fit into the div as the title lengt ...

htmlcssbootstrap-4

CSS not affecting DIV height properly

Alright, so I'm facing a little issue with a div that's nested within a form. The form has been set to a minimum height of 100%, however, the child div doesn't seem to stretch even after adjusting the height or min-height properties to 100%. ...

csshtml

Postman seems to be functioning correctly while AXIOS is encountering issues

I've encountered a strange issue with my MERN app. When I use Postman to send a PUT request to my API, it successfully updates both the API and MongoDB. However, when performing the same action on the front-end, the API does not update even though the ...

javascriptreactjsapiaxiosmern

Incorporating CSS into an HTML document with Jersey/Grizzly

This is the structure of my project: src/main/java -- main.java src/main/resources -- webapp -- -- css -- -- js -- -- images -- -- pages -- -- -- home.html Currently, my Maven project utilizes Jersey and Grizzly. I am able to call my REST services and lo ...

javahtmlcssmavengrizzly

Having trouble getting the HTML5 Canvas element to display on iOS Chrome or Safari?

I have developed a website that utilizes a user's webcam frames through an HTML <video> element. These frames are then copied to a <canvas> element, which is displayed using opencv.js' cv.imshow(). Additionally, the frame is duplicate ...

javascripthtmlcssopencv

Before installing npm packages, ensure to gracefully stop the process during pre-installation

Is there a way to stop the npm install process conditionally within a preinstall script? At the moment, I have a preinstall script named preinstall.js: if (someCondition) { process.kill(process.ppid, 'SIGKILL'); } The content of my package.js ...

javascriptnpmnpm-install

What is the best way to incorporate a button for toggling CSS animations?

I need help adding a button to toggle the animation on this JSFiddle. I tried adding the code below but can't seem to start and stop the animation. body .a [class^="b"] { width: 200px; height: 142.8571428571px; margin: 0 auto; ...

javascriptjqueryhtmlcss

What is the best way to adjust the animation settings for SweetAlert2's Toast feature?

I recently integrated SweetAlert2's toast notifications into my web application and customized the animation using the customClass parameter to have the notification slide in from the right side. However, there are a couple of things I'm struggli ...

csssweetalert2

Transforming seconds into years, months, weeks, days, hours, minutes, and seconds

Can anyone help me modify Andris’ solution from this post: Convert seconds to days, hours, minutes and seconds to also include years, months, and weeks? I am currently running this code: getDateStrings() { console.log(req_creation_date); const toda ...

javascriptangulartypescript

Utilize jQuery to animate the concealment of elements in my sidebar

On my webpage, there is a sidebar that behaves in a specific way when the browser is resized. Items are only displayed if they are able to fit within the visible portion of the window. This functionality can be seen in action on the jsFiddle provided. htt ...

jquerycss

Access environmental variables within Next.js middleware

Within my nextjs project, I have declared variables in both the .env and next.conf.js files. The code snippet from the next.conf.js file looks like this: module.exports = { env: { NEXT_PUBLIC_JWT_SECRET: "...", }, publicRuntimeConfig: { ...

javascriptreactjsnext.jsenvironment-variables

Adding images to chart labels in vue-chartjs explained

I'm facing a challenge in adding flag icons below the country code labels, and I could really use some guidance. Here is an image of the chart with my current code The flag images I need to use are named BR.svg, FR.svg, and MX.svg, located under @/a ...

javascriptvue.jschart.jsvue-chartjs

Switching over to styled components from plain CSS using a ternary operator

Currently, I am in the process of converting my project from using regular CSS to styled components (https://styled-components.com/). So far, I have successfully converted all my other components except for one that I'm having trouble with. I've ...

javascriptcssreactjsmaterial-uistyled-components

Utilizing a variety of languages within a single HTML document

Is there a way to incorporate both Danish and Polish text in the same HTML output using PHP? I recently discovered that these two languages are encoded in different character sets. Does anyone have a solution for this? ...

phphtml

The website is missing the display of Google Maps

The Google map is not displaying on my website page that uses PHP. I need assistance with this issue. Below is the webpage URL and the source code: <section class="meteor-google-map fullwidth block" style="height: 450px; border: solid transparent; bo ...

javascriptjquerycsshtml

Developing a JSON structure that is able to be deserialized within a C# environment

While attempting to generate a JSON object that can be interpreted as a C# object, I continually encounter 400 bad request errors when sending it via AJAX. Here's my JavaScript snippet: $.ajax({ type: "POST", url: "LeagueService.svc/Fixtures ...

c#javascriptjqueryjsonwcf

Issue with dynamically filling a form field using ValidityState

I have been utilizing the ValidityState interface for client-side form validation, but I've encountered an issue. Whenever my form is populated programmatically, such as after making a call to a third-party API, the tooLong state always returns false, ...

javascript

What is the optimal method for eliminating a singular item from a substantial array in JavaScript?

A website built with Vue.js fetches a variety of objects from an API and stores them in an array. Users can view this data in a table and delete individual items if needed. The array typically contains 700-2000 objects, but could potentially have anywhere ...

javascriptarrays