simplecells-v-if.vue

<tbody
    v-for="(row, index) in filteredRows"
    :key="row.id"
    @dragenter.prevent="dragenter"
    @dragleave.prevent="dragleave"
    @dragover.prevent="dragover"
    @drop.prevent="drop"
    :data-id="row.id"
    :data-idx="index"
    v-show="row.visible"
>
    <!--                                          -->
    <!--    If not active row, render simple row  -->
    <!--                                          -->
    <tr 
        class="data" 
        v-if="!isActivated(row.id)" 
        @click="activate(row)"
    >
        <td class="number">
            {{ row.number }}
        </td>
        <!-- SELECT Building -->
        <td :class="buildingKey">
            {{getVal(row, buildingKey)}}
        </td>
        <!-- SELECT Floor -->
        <td :class="floorKey">
            {{getVal(row, floorKey)}}
        </td>
        <!-- SELECT Part -->
        <td :class="partKey">
            {{getVal(row, partKey)}}
        </td>
        <!-- SELECT Room -->
        <td :class="roomKey">
            {{getVal(row, roomKey)}}
        </td>
        <!-- INPUT Description -->
        <td class="text padd">
            {{ row.text }}
        </td>
        <!-- SHOW Inspection date --> 
        <td class="inspection-date padd">
            {{ row.inspectionDate | moment('D. MMM') }}
        </td>
        <!-- SELECT Responsible -->
        <td>
            {{ getVal(row, 'responsible') }}
        </td>
        <!-- DATEPICKER Completion -->
        <td class="completion" >
            {{ getValCompletion(row) }}
        </td>
        <!-- INPUT Comment (previously status) -->
        <td
            class="status"
            :class="rowStatusCss(row)"
        >
            {{ row.comment || '' }}
        </td>
        <!-- ICON Check -->
        <td class="no-bg check">
            <kk-checkbox square inline @click.stop @change.native="updateSelected($event, row.id)" />
        </td>
        <!-- ICON Delete -->
        <td class="no-bg delete" @click.stop="deleteRow(index, row.id)">
        </td>
        <!-- ICON Badge -->
        <td class="no-bg gallery" v-if="row.images.length > 0">
            <b-badge
                pill
                variant="primary"
            >{{ row.images.length }}</b-badge>
        </td>
    </tr>
    <!--                                                 -->
    <!-- Else if Activated row, render complicated row -->
    <!--                                                 -->
    <tr class="data" v-else>
        <td class="number">
            {{ row.number }}
        </td>
        <!-- SELECT BUILDING -->
        <td
            :class="buildingKey"
        >
            <kk-select 
                add
                :add-callback="addMeta.bind(this, buildingKey, row.id)"
                desktop
                :options="inspection[buildingKey+'s']"
                :placeholder="buildingTrans"
                v-model="row[buildingKey]"
                @changed="updateRow(row.id, buildingKey, $event)"
            />
        </td>
        <!-- SELECT FLOOR -->
        <td
            :class="floorKey"
        >
            <kk-select 
                add
                :add-callback="addMeta.bind(this, floorKey, row.id)"
                desktop
                :options="inspection[floorKey+'s']"
                :placeholder="floorTrans"
                v-model="row[floorKey]"
                @changed="updateRow(row.id, floorKey, $event)"
            />
        </td>
        <!-- SELECT PART -->
        <td
            :class="partKey"
        >
            <kk-select 
                add
                :add-callback="addMeta.bind(this, partKey, row.id)"
                desktop
                :options="inspection[partKey+'s']"
                :placeholder="partKey"
                v-model="row[partKey]"
                @changed="updateRow(row.id, partKey, $event)"
            />
        </td>
        <!-- SELECT ROOM -->
        <td
            :class="roomKey"
        >
            <kk-select  
                add
                :add-callback="addMeta.bind(this, roomKey, row.id)"
                desktop
                :options="inspection[roomKey+'s']"
                :placeholder="roomTrans"
                v-model="row[roomKey]"
                @changed="updateRow(row.id, roomKey, $event)"
            />
        </td>
        <!-- INPUT Description -->
        <td
            class="text padd"
            contenteditable
            @blur="updateRow(row.id, 'text', $event, row.text)"
        >
            {{ row.text }}
        </td>
        <!-- SHOW inspection date --> 
        <td class="inspection-date padd">
            <div :title="row.inspectionDate">
                {{ row.inspectionDate | moment('D. MMM') }}
                <fa-icon :icon="['fal', 'clock']" />
            </div>
        </td>
        <!-- SELECT Responsible -->
        <td>
            <kk-select
                desktop
                :options="contacts"
                :placeholder="'inspection.Ansvarlig' | trans"
                data-text="name"
                v-model="row.responsible"
                @changed="updateRow(row.id, 'responsible', $event)"
                group="industry"
            />
        </td>
        <!-- DATEPICKER Completion -->
        <td class="completion">
            <v-date-picker
                class="date-picker input-button-wrapper"
                :formats="{input: ['D. MMM']}"
                :input-props="{'class': 'input-button'}"
                @input="updateDate(row, $event)"
                mode="range"
                popover-visibility="focus"
                show-caps
                v-model="row.completion"
            >
                <input
                    @change="updateValue($event.target.value, { formatInput: true, hidePopover: false })"
                    class="input-button"
                    placeholder="-"
                    slot-scope="{ inputValue, updateValue }"
                    type="text"
                    :value="getValCompletion(row)"
                >
            </v-date-picker>
        </td>
        <!-- INPUT Comment (previously status) -->
        <td
            class="status"
            :class="rowStatusCss(row)"
            contenteditable
            @blur="updateRow(row.id, 'comment', $event, row.comment)"
        >
            {{ row.comment || '' }}
        </td>
        <!-- ICON Check -->
        <td class="no-bg check">
            <kk-checkbox square inline @click.stop @change.native="updateSelected($event, row.id)" />
        </td>
        <!-- ICON Delete -->
        <td class="no-bg delete" @click.stop="deleteRow(index, row.id)">
        </td>
        <!-- ICON Badge -->
        <td class="no-bg gallery" v-if="row.images.length > 0">
            <fa-icon :icon="['fal', 'images']" @click.stop="showGallery(row)" />                        
            <b-badge
                pill
                variant="primary"
            >{{ row.images.length }}</b-badge>
        </td>
    </tr>
</tbody>