v-show does not work in slot templates
Open
Nobody has claimed this yet.
- Dominant language
- Vue
- Stars
- 78
- Forks
- 16
- PR merge metrics
- No merged PRs in 30d
Description
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>
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the reproduced template using AdminLayout and DataTable, especially the #column-0, #column-1, and #column-2 slot templates. Check how the DataTable component renders slot content and how v-show responds when editing changes; done means the buttons and cell elements show or hide correctly for each editing state.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100