Using Vue.js to implement dynamic table rowspan functionality

Has anyone experimented with implementing dynamic table rowspan in vue.js?

Here is the sample data

{
    date: '2018-08-14',
    temp_que : 120,
},
{
    date: '2018-08-14',
    temp_que : 120,
},
{
    date: '2018-08-15',
    temp_que : 120,
},
{
    date: '2018-08-15',
    temp_que : 120,
},

Shown below is the HTML template using Vue.js

<template v-for="(item, i) in list">
  <tr> 
    <td
      :rowspan=""
      v-if=""
      class="text-center"
      v-text="item.date"
    ></td>
  </tr>
</template>

The question at hand is how to set a rowspan when dates are the same?

Answer №1

To start, you must tally up the occurrences of the same date, similar to this example: { date: '2018-08-14', same_num:'count', temp_que : 120, },

  <template >
     <tr v-for="(item, i) in list"> 
       <td
         :rowspan="item.same_num"
         v-if="!i? true:item[i-1].date==item[i].date? '':true"
         class="text-center"
         v-text="item.date"
       ></td>
     </tr>
   </template>

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

Leveraging composer to enhance the organization of my dependencies

As I organize my files for my PHP-based website, I've turned to composer for assistance. One issue I've encountered is loading front-end dependencies like jquery into my pages, specifically the index.php. In the past, I manually specified each js ...

What is preventing me from invoking the function that I built using the Function() constructor?

Utilizing the Function Constructor within a function to generate functions during its call. Below is the constructor: funcGenerator(f) { return new Function( "value", "try{ return " + f + '; } catch (e) { ret ...

When a VueJS button is located within a div that also contains a link, clicking on

Can someone help me with my HTML issue? <a href="/someplace"> <div> <vuecomp></vuecomp> <span>Click row for more info</span> </div> </a> Following is the Vue component I am working on... ...

Error encountered in my JavaScript file - Unexpected Token < found on line 1 of the loadash.js script

I am right at the end of creating a sample dashboard with charts using dc.js, but I have hit a roadblock with one error remaining. This error is causing an issue. Unexpected token < on line 1 for loadash.js. The loadash.js file is valid, but for som ...

Creating a simulated class within a function utilizing Jest

Currently, I am in the process of testing a controller that utilizes a class which functions like a Model. const getAllProductInfo = (request, response) => { const productInformation = new ProductModel().getAll(); response.status(200) resp ...

Trigger a JavaScript function using PHP and retrieve the output

My goal is to execute a javascript function from a PHP script by passing a variable to the javascript function and then displaying only the response in the PHP script. I want to ensure that when a client views the source code of my php file, they can only ...

Why does my useEffect consistently execute after the initial rendering, despite having specified dependencies?

const [flag, setFlag] = React.useState(false) const [username, setUsername] = React.useState('') const [password, setPassword] = React.useState('') const [errorUsername, setErrorUsername] = React.useState(true) const [er ...

Starting data initialization using a property object within a Vue component

I am encountering an issue with two Vue components, EventTask and EventCard. Within EventTask, there is a currentEvent object in the data section, which I pass as a prop to EventCard using the following code snippet: <event-card :current-event="cur ...

Dealing with jQuery hover/toggle state conflicts in Internet Explorer?

Check out my code snippet: <!doctype html> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <style type="text/css"> label {display:block; w ...

Creating resizable rows of DIVs using jQuery

I'm currently developing a scheduling widget concept. The main idea is to create a row of DIVs for each day of the week. Every row consists of a set number of time periods represented by DIVs. My goal is to enable the resizing of each DIV by dragging ...

Converting an ajax request to CORS

Would appreciate some guidance on accessing an API through my localhost using the code below: $.ajax({ url: "http://domain.xxx.net/api/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7a3b8bcb2b9a4f9bda4b8b9e8b2ba ...

Chart.js encounters difficulties displaying the chart due to the data in reactjs

My goal is to utilize chartjs-2 to showcase a bar graph with data. Below is the code I've implemented: import React from "react"; import { Bar, Line, Pie } from "react-chartjs-2"; export default class App extends React.Component { constructor(pro ...

Utilizing multiple language files in Vue with vue-i18n: A comprehensive guide

Recently delving into vue and utilizing vuetify for my project, I managed to incorporate internationalization successfully. However, I am encountering difficulties with the standard method of a single file per language as my project expands, making maint ...

What is the best way to eliminate spaces, commas, and periods from a variable in javascript?

After attempting var res = str.replace(/ |,|.|/g, ""); and var res = str.replace(/ |,|.|/gi, "");, I'm still puzzled as to what I might be missing. var str = "Text with comma, space, and period."; var res = str.replace(/ |,|.|/g, ""); document.writ ...

VueJS Component has trouble refreshing the DOM content following an AJAX Promise

I've encountered issues updating data in my Vue application after an AJAX callback. I have previously resolved similar problems by using Vue.set, but for some reason, it's not working for me today. The only difference is that I am calling a serv ...

The header that sticks on scroll is annoyingly blocking the content

I managed to create a sticky on-scroll header/navigation bar successfully. Here is how it looks now However, I encountered an issue. When it reaches the top, it automatically 'covers' the top part of my content, which has text on it, and I don& ...

Issue with the iOS gyroscope detected when rotating specifically around the z-axis

I am facing a unique challenge with an unusual bug and I'm looking for help from anyone who has encountered this issue before or can provide a solution. My current project involves using Javascript to access the gyro on iOS devices, specifically focu ...

When trying to make an API request on localhost, you may encounter a 405 error message and CORS

I am encountering a 405 Error (Method not allowed) and CORS policy blockage while attempting to retrieve data from a weather API on my local environment. I have configured the headers but seem unable to resolve the issue. This method works fine in a live s ...

How can you extract path information from an SVG file and utilize it as a marker on Google Maps?

I want to implement a custom SVG icon as a marker on Google Maps. I have obtained this SVG file: <svg xmlns="http://www.w3.org/2000/svg" width="510px" height="510px" viewBox="0 0 510 510"> <g stroke="black" stroke-width="10" ...

What causes bootstrap to fail on smaller screens?

While developing an app using Bootstrap, I encountered an issue where the app was not functioning properly on small screens. Everything worked perfectly on larger screens, such as a PC browser, but on a mobile browser, none of the tabs would open. When I t ...