How to know if tag already display in Vue js Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of How to know if tag already display in Vue js without wasting too much if your time.

The question is published on by Tutorial Guruji team.

This is 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>

So if the td-Tag with the id “notempty” is displayed (v-if is one time true) in the <template>-loop run the td with the id “empty” should not be displayed (ignored/not interpreted) in the <template>-loop run. And if the “notempty” td tag doesnt display (every v-if is false in the td-loop), the empty tag should be display

V-Else in the “empty” td tag like below doesnt work, becuase of the v-for in the td “notempty”. the empty td tag would be displayed everytime 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

Just use <template> again. Do not forget to place :key on elements generated with v-for

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

We are here to answer your question about How to know if tag already display in Vue js - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji