Identifying the presence of a tag in Vue.js

Check out my Code:

<template v-for="day in getMonthLength()" >
          
          <td :id='notempty' v-for="dataa in data" v-if="dataa.employee_id === employee.id">
            <input type="number" :value="dataa.value">
          </td>

          <td :id='empty'>
            <input type="number">
          </td>

</template>

If the td-Tag with the id "notempty" is displayed (v-if is true at least once) in the <template>-loop run, then the td with the id "empty" should not be displayed or interpreted in the <template>-loop run. On the other hand, if the "notempty" td tag doesn't display (every v-if is false in the td-loop), the empty tag should be displayed instead.

The use of V-Else in the "empty" td tag does not work as intended, since there is a v-for loop in the td "notempty". This means that the empty td tag would appear every time the employee.id is not equal.

 <template v-for="day in getMonthLength()" >
              
              <td :id='notempty' v-for="dataa in data" v-if="dataa.employee_id === employee.id">
                <input type="number" :value="dataa.value">
              </td>
    
              <td v-else :id='empty'> <---------
                <input type="number">
              </td>
    
    </template>

Answer №1

To repeat the process, simply use the <template> tag once more. Make sure to include the :key attribute on elements created with the v-for directive.

<template v-for="item in items">
  <template v-for="dataItem in dataItems">
    <td :id='notempty' v-if="dataItem.id === item.id" :key="dataItem.id">
      <input type="number" :value="dataItem.value">
    </td>
    <td v-else :id='empty' :key="dataItem.id">
      <input type="number">
    </td>
  </template>
</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

How to integrate a new DOM element into a React Native app with the simple click of a button

Is it possible to add a <Text> element with the click of a button in react native? If so, how can this be achieved? Here is my current code: import React, { Component } from 'react' import { StyleSheet, Text, View, Button } from &apos ...

How can I apply a CSS class to a group of radio buttons within a radio button list?

I'm attempting to validate a radio button group and apply a specific CSS class to it. Since this is a server control, I can only apply the class one way. However, upon checking with jQuery, I discovered that the class is actually being attached to the ...

Error message: Suitescript encountered an unexpected issue - TypeError: The function this.handleChange is not defined

For the past year, I have been immersed in Suitescript development. In my current project, I have a client script that triggers on Save for a Journal Entry. However, upon trying to save, I encounter an error message that reads "TypeError this.handleChang ...

Django: creating a custom dropdown input field for the receiver that is tailored to the sender

I am facing an issue with creating a dropdown list for the receiver without including the sender's id/name. This is different from a chained dropdown which has already been addressed in previous discussions. I believe that using ajax might be the solu ...

Creating an if statement that validates whether all variables have non-null values

I am still getting the hang of javascript and working on some coding projects from my textbooks. The current task involves creating an if statement to check if the values of the elements referenced by the names fname, lname, and zip are all not null. Here ...

Issue with Bootstrap Modal Tabs not functioning

CODE <!-- Unique Modal Code --> <div class="modal fade" id="uniqueModal" tabindex="-1" role="dialog" aria-labelledby="uniqueLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="m ...

template for displaying data in Vue.js using props

In my application, I have a component that I frequently use to display tables. Now, I want to enhance this component by allowing the customization of table fields (templates) through props in the parent component. This way, I can avoid constant edits to th ...

The "Read more" feature is not functional on mobile devices

I am encountering issues with my Wordpress blog on mobile screens. The "read more" button is not functioning, and the screen size does not fit properly on mobile devices. Visit abood250.com for more information. CSS Styling: /* =Global ----------------- ...

Error arises on Github when submitting a pull request due to a conflicted package

When facing conflicts in the package.json file while submitting a pull request, what is the best approach to resolve them? I usually attempt using git pull origin, but it tends to generate numerous merge commits. ...

Vuetify Upload Files

Recently, I implemented a form containing the Vuetify component v-file-input: <v-file-input chips multiple label="File(s)" v-model="file.files"></v-file-input> The structure of my data object is as follows: data: () => ({ file: { ...

Navigating TS errors when dealing with child components in Vue and Typescript

Recently, I encountered an issue where I created a custom class-based Vue component and wanted to access its methods and computed properties from a parent component. I found an example in the Vue Docs that seemed to address my problem (https://v2.vuejs.org ...

The method for retrieving values and $id from a $firebaseArray using angularJS

Hey there, I'm fairly new to working with Firebase and I seem to be stuck on a problem that I can't find a solution for despite looking in many different places. Here is the structure of my Firebase database: I am trying to retrieve data from a s ...

The Javascript code within the CodeIgniter view is failing to function

After searching for a while, I have yet to find a solution to my issue. I wrote a JavaScript script to check the match of the password and confirm password, but it doesn't seem to be executing. Additionally, I tried another script to close a popup usi ...

Unable to modify translation values in an existing ngx-translate object

I am facing an issue where I am unable to change the value of an object property within a translation JSON file using ngx translate. Despite attempting to update the value dynamically when receiving data from an API, it seems to remain unchanged. I have t ...

Is it possible to utilize vue packages within nuxtjs framework?

As I delve into my Nuxt project, I am discovering the multitude of helpful packages that enhance the Vue experience. However, I have yet to come across similar packages tailored specifically for Nuxt. This leads me to ponder if there is a seamless way to ...

Using Vuetify to populate a selection menu with options from a JSON array containing objects

I am facing a challenge while trying to populate a Vuetify v-select component with data from a REST API JSON response. Below is the current code I have been working on. While populating the list using a simple array is easy, I am struggling to set both the ...

Is there a way to adjust the label elevation for a Material UI TextField component?

I am trying to enhance the appearance of a textfield label, but I am facing some challenges with my code. textStyle: { backgroundColor: '#1c1a1a', border: 0, borderRadius: 0, width: 400, height: 66, display: 'flex&a ...

Refresh and append values to multiple select2 fields following an ajax request

I recently encountered an issue where I needed to add values to a select2 (multiple select) field after making an ajax call. In my quest for a solution, I came across this helpful question on Stack Overflow: Dynamically add item to jQuery Select2 control ...

After the table finishes loading, my goal is to display an export to Excel button

I am currently working on generating an HTML table using JSON data received from the backend Java application. My objective is to display an "Export to Excel" button after populating the table. The process involves users entering dates and selecting option ...

Tips for displaying &#8212 as an em dash when utilizing interpolation

Currently, I am facing an issue on a webpage where I am attempting to have the title of a blog post display as Sleep—It's frustratingly Important., with an em dash between Sleep and It's. Initially, I hard-coded it like this: <h2 class="pos ...