Display the closing tag depending on specific conditions to simulate the behavior of a calendar

Question

Display the closing tag depending on specific conditions to simulate the behavior of a calendar

Is it possible to conditionally render a closing tag using v-if? If so, what is the correct way to do it? Initially, I tried the following:

<template v-for="day in days">
    <td class="days">{{day.number}}</td>
        <template v-if="day.isSunday">
            </tr>
            <tr>
        </template>
</template>

While this works, it does not render </tr><tr> as raw HTML - is this the expected behavior?

If conditional rendering of closing tags is not possible, what is the best way to break a table row conditionally?

In my specific scenario, I have an array of days in a month with additional information. Each day has an isSunday property, and I want to start a new row after each Sunday (simulating calendar behavior)

javascript css vue.js vuejs2 vue-component

Answer 1

Answer №1

Typically, it is advised to centralize all logic in the script and utilize properties and method calls in the template section. For this particular scenario, I will establish a computed property named cptDays. Within this property, I will iterate through the days array. If a normal day is encountered, it will be added to a week. If the day is identified as Sunday, it will also be added and the week count will be incremented. The final result will be the month array that will be looped through in the template.

Important Note

I have utilized CSS styling from bootstrap to enhance the visual appearance. You have the option to remove it without affecting the functionality of your code.

new Vue({
  el: '#app',
  data: {
    days: [
      {
        "number": 1,
        "isSunday": false
      },
      {
        "number": 2,
        "isSunday": false
      },
      ...
      {
        "number": 31,
        "isSunday": false
      }
    ]
  },
  computed: {
    cptDays() {
      let month = [],
        i = 0;
      this.days.forEach((day) => {
        if (!day.isSunday) {
          if (month[i] == undefined) {
            month[i] = [];
            month[i].push(day);
          } else {
            month[i].push(day);
          }
        } else {
          month[i].push(day);
          i++;
        }
      });
      return month;
    }
  }
})

<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="Vue.delete">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Mon</th>
          <th>Tue</th>
          ...
          <th>Sun</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="week in cptDays">
          <td v-for="day in week ">{{day.number}}</td>
        </tr>
      </tbody>
    </table>
  </div>

Answer 2

Typically, it is advised to centralize all logic in the script and utilize properties and method calls in the template section. For this particular scenario, I will establish a computed property named cptDays. Within this property, I will iterate through the days array. If a normal day is encountered, it will be added to a week. If the day is identified as Sunday, it will also be added and the week count will be incremented. The final result will be the month array that will be looped through in the template.

Important Note

I have utilized CSS styling from bootstrap to enhance the visual appearance. You have the option to remove it without affecting the functionality of your code.

new Vue({
  el: '#app',
  data: {
    days: [
      {
        "number": 1,
        "isSunday": false
      },
      {
        "number": 2,
        "isSunday": false
      },
      ...
      {
        "number": 31,
        "isSunday": false
      }
    ]
  },
  computed: {
    cptDays() {
      let month = [],
        i = 0;
      this.days.forEach((day) => {
        if (!day.isSunday) {
          if (month[i] == undefined) {
            month[i] = [];
            month[i].push(day);
          } else {
            month[i].push(day);
          }
        } else {
          month[i].push(day);
          i++;
        }
      });
      return month;
    }
  }
})

<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="Vue.delete">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Mon</th>
          <th>Tue</th>
          ...
          <th>Sun</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="week in cptDays">
          <td v-for="day in week ">{{day.number}}</td>
        </tr>
      </tbody>
    </table>
  </div>

Display the closing tag depending on specific conditions to simulate the behavior of a calendar

Answer №1

Similar questions

Webpack 4 combines the power of Vue with the versatility of Typescript classes and JavaScript code simultaneously

Conceal the standard style class of the p:selectOneRadio element

A guide on effectively utilizing nested arrays within a pcolumn prime ng data table

The menu seems to be off-center

Tips for employing CSS hover within HTML elements?

What is the best way to determine if a child div exists within a parent div?

Collect data entered into the input box and store them in an array for the purpose of

Transforming button alignment from vertical to horizontal in Bootstrap based on the screen size of the device

What yields greater performance in MongoDB: employing multiple indexes or creating multiple collections?

Tips for creating a dynamic sidebar animation

Error: The server selection process has encountered an unexpected issue

Dynamic data binding in AngularJS with dynamically generated views

What is the correct way to remove listeners in componentWillUnmount using React, and why is binding necessary in the constructor?

Tips for transferring the ID from one element to another using JavaScript

Is the Packery image grid only functional when the background image is specified in CSS and not in JavaScript? Perhaps we need to look into using Await/Sem

Preventing an iframe from reloading when transferring it to a new parent using appendChild

How can you determine the status of an individual checkbox within a reactjs (material-table) component?

What is the reason for the lack of invocation of the next-auth jwt callback during page transitions?

Preserve the values of checkboxes throughout the entire website by utilizing localStorage

Validating HTML forms using Javascript without displaying innerHTML feedback