Блог

Главная - Вопросы по программированию - Как узнать, отображается ли тег уже в Vue js

Как узнать, отображается ли тег уже в Vue js

#javascript #vue.js

Вопрос:

Это мой код:

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

Поэтому, если отображается td-тег с идентификатором «пусто» (v-если однократно верно) в <template> цикле выполнения
, td с идентификатором «пусто» не должен отображаться (игнорироваться/не интерпретироваться) в <template> цикле выполнения. И если тег td «пусто» не отображается (каждый v-if имеет значение false в цикле td), пустой тег должен отображаться

V-Else в теге td «пусто», как показано ниже, не работает, из-за v-for в теге td «пусто». пустой тег td будет отображаться каждый раз, когда сотрудник.идентификатор не равен.

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

Комментарии:

1. как насчет id динамической настройки в зависимости от вашего состояния? тогда вам не понадобится второй td тег. также то же самое для :value

2. @MohammadMirsafaei спасибо, это хорошая идея, но как я могу привязать :значение к условию или как динамически установить его для моего v-if

Ответ №1:

Просто используй <template> еще раз. Не забудьте разместить :key на элементах, созданных с помощью 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>
Метки: ,