v-show does not work in slot templates

[ttc0419]

The <div class="card card-body" v-show="editing === -1"></div> can react without any issues but not elements inside the ````< AdminLayout >```.

<template>
  <AdminLayout>
    <div class="d-flex justify-content-between align-items-center">
      <h1 class="mb-4">Users</h1>
      <button type="button" class="btn btn-primary">
        <i class="bi bi-plus-lg"></i> Add
      </button>
    </div>
    <div class="card card-body" v-show="editing === -1"></div>
    <DataTable :data="data" class="table">
      <thead class="table-light">
      <tr>
        <th>Username</th>
        <th>Password</th>
        <th>Actions</th>
      </tr>
      </thead>

      <template #column-0="props">
        <span v-if="editing === -1">{{ props.rowData[0] }}</span>
        <input v-else-if="editing === props.rowIndex" :value="props.rowData[0]">
      </template>

      <template #column-1="props">
        <span v-if="editing === -1">{{ props.rowData[1] }}</span>
        <input v-else-if="editing === props.rowIndex" :value="props.rowData[1]">
      </template>

      <template #column-2="props">
        <button type="button" class="btn btn-sm btn-primary me-2" v-show="editing === -1" @click="edit(props)">
          <i class="bi bi-pencil-fill"></i> Edit
        </button>
        <button class="btn btn-sm btn-danger me-2" v-show="editing === -1" @click="remove(props)">
          <i class="bi bi-trash3-fill"></i> Remove
        </button>
        <button class="btn btn-sm btn-success me-2" v-show="editing >= 0" @click="confirm(props)">
          <i class="bi bi-check-lg"></i> Confirm
        </button>
        <button class="btn btn-sm btn-secondary" v-show="editing >= 0" @click="cancel(props)">
          <i class="bi bi-x-lg"></i> Cancel
        </button>
      </template>
    </DataTable>
  </AdminLayout>
</template>

<script setup lang="ts">
import AdminLayout from '../layouts/AdminLayout.vue'
import DataTable from 'datatables.net-vue3'
import DataTablesLib from 'datatables.net-bs5';
import 'datatables.net-select-bs5';
import {onMounted, ref} from "vue";

DataTable.use(DataTablesLib);

let editing = ref(-1)

const data = [
  ["xxx", "xxx"],
  ["yyy", "yyy"],
];

function edit(d) {
  editing.value = d.rowIndex
}

function remove(d) {
  console.log(d)
}

function confirm(d) {
  console.log(d)
}

function cancel(d) {
  console.log(d)
}
</script>

[AllanJard]

Can you use Stackbltiz to create a running example that I can debug please?

[PeterPilley]

The <div class="card card-body" v-show="editing === -1"></div> can react without any issues but not elements inside the ````< AdminLayout >```.

<template>
  <AdminLayout>
    <div class="d-flex justify-content-between align-items-center">
      <h1 class="mb-4">Users</h1>
      <button type="button" class="btn btn-primary">
        <i class="bi bi-plus-lg"></i> Add
      </button>
    </div>
    <div class="card card-body" v-show="editing === -1"></div>
    <DataTable :data="data" class="table">
      <thead class="table-light">
      <tr>
        <th>Username</th>
        <th>Password</th>
        <th>Actions</th>
      </tr>
      </thead>

      <template #column-0="props">
        <span v-if="editing === -1">{{ props.rowData[0] }}</span>
        <input v-else-if="editing === props.rowIndex" :value="props.rowData[0]">
      </template>

      <template #column-1="props">
        <span v-if="editing === -1">{{ props.rowData[1] }}</span>
        <input v-else-if="editing === props.rowIndex" :value="props.rowData[1]">
      </template>

      <template #column-2="props">
        <button type="button" class="btn btn-sm btn-primary me-2" v-show="editing === -1" @click="edit(props)">
          <i class="bi bi-pencil-fill"></i> Edit
        </button>
        <button class="btn btn-sm btn-danger me-2" v-show="editing === -1" @click="remove(props)">
          <i class="bi bi-trash3-fill"></i> Remove
        </button>
        <button class="btn btn-sm btn-success me-2" v-show="editing >= 0" @click="confirm(props)">
          <i class="bi bi-check-lg"></i> Confirm
        </button>
        <button class="btn btn-sm btn-secondary" v-show="editing >= 0" @click="cancel(props)">
          <i class="bi bi-x-lg"></i> Cancel
        </button>
      </template>
    </DataTable>
  </AdminLayout>
</template>

<script setup lang="ts">
import AdminLayout from '../layouts/AdminLayout.vue'
import DataTable from 'datatables.net-vue3'
import DataTablesLib from 'datatables.net-bs5';
import 'datatables.net-select-bs5';
import {onMounted, ref} from "vue";

DataTable.use(DataTablesLib);

let editing = ref(-1)

const data = [
  ["xxx", "xxx"],
  ["yyy", "yyy"],
];

function edit(d) {
  editing.value = d.rowIndex
}

function remove(d) {
  console.log(d)
}

function confirm(d) {
  console.log(d)
}

function cancel(d) {
  console.log(d)
}
</script>

Thank you for posting this, I couldnt get the pops to work until I found this