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