Как отобразить элементы таблицы скрытые при помощи v-show?

Question

[Алексей]

Есть таблица, в которой данные изначально скрываются по условию текущего дня

<thead>
        <tr>
          <th rowspan="2">Контрагент</th>
          <th rowspan="2">План</th>
          <template v-for="day in days">
            <th :key="day.id" v-show="thrd(day)" style="position: relative;">
              {{ day }}
              <button class="collapsed" @click="CollapseTable()">+</button>
            </th>
          </template>
        </tr>
        <template v-for="day_of_week in send_data">
          <th v-show="thrd(day_of_week)" :key="day_of_week.id" :class="{ weekend: isWeekend(day_of_week) }">
            {{ day_of_week }}

          </th>
        </template>
      </thead>
      <tbody>
        <!---10 groups-->
        <template v-for="(group, group_name) in data">
          <tr>
            <td class="col1" @click="visibleGroup(group_name)">{{ group_name }}{{ collapse(group_name) }}</td>
            <!-- сумма плана -->
            <td class="col2">{{ group.plan | format }} </td>
            <template v-for="day, day_index in group.week_days">
              <td class="col2" v-show="thrd(day_index)">{{ day.val | format }}</td>
            </template>
          </tr>
          <!--companies names-->
          <tr v-for="(company, company_name) in group.companies" :key="company_name.id" v-show="visible_row">
            <td>{{ company_name }}</td>
            <td>
              {{ company.plan | format }}
            </td>
            <template v-for="(day, index) in company.week_days">
              <td v-show="thrd(index)" :key="day.id">

                {{ day.val }}
                <!-- {{ Object.values(company.week_days) }} -->
              </td>
            </template>
          </tr>
        </template>
      </tbody>

Условие для v-show сделал как метод

thrd(index){
      return index == this.today
  },

Проблема заключается в том, что по клику на кнопку (где функция CollapseTable) не могу вызвать раскрытие всех элементов которые были скрыты по условию v-show и обраьное их скрытие по условию v-show

Answer 1

[modelair]

подобное условие должно возвращать ref, т.е. должно быть computed
чтобы computed стал функцией, верните им функцию

<script setup>
import { computed } from 'vue'

const ifShow = computed(() => {
  return (isShow) => isShow === 'some day'  
})
</script>

<template>
  <span v-show="ifShow('some day')">Hi!</span>
</template>

тут

UPD: ну или с Options API, как многие любят.

export default {
  data() {
    return {}
  },
  computed: {
    ifShow() {
      return (isShow) => isShow === 'some day'  
    }
  }
}