我正在尝试在我的 v-dialog 中使用一个函数ubahNilai
。当我单击该按钮时,出现此错误消息。
'Uncaught TypeError: Cannot set properties of undefined (setting 'status')'
我做错什么了吗?
这是我的模板
<template>
<v-card
flat
title="Daftar Karyawan"
>
<v-row>
<v-col cols="4">
<v-text-field
v-model="search"
label="Search"
prepend-inner-icon="mdi-magnify"
variant="outlined"
></v-text-field>
</v-col>
<v-col cols="2">
<v-select
v-model="selectedFilterStatus"
label="Filter Status"
variant="outlined"
:items="filterKeyStatus"
></v-select>
</v-col>
<v-col cols="2">
<v-autocomplete
v-model="selectedFilterUnit"
label="Filter Unit"
variant="outlined"
:items="filterKeyUnit"
></v-autocomplete>
</v-col>
<v-col cols="2">
<v-autocomplete
v-model="selectedFilterForkom"
label="Filter Forkom"
variant="outlined"
:items="filterKeyForkom"
></v-autocomplete>
</v-col>
</v-row>
<v-data-table
:headers="headers"
:items="filteredItems"
:search="search"
:items-per-page="5">
<!-- :filterKey="filterKey" -->
<template v-slot:item="{ item }">
<tr style="text-align: center;">
<td style="text-align: start;">{{ item.name }}</td>
<td>{{ item.nip }}</td>
<td>{{ item.unitKerja }}</td>
<td>{{ item.forkom }}</td>
<td v-if="item.status == `Sudah Dinilai`">
<v-btn color="green">
Sudah Dinilai
</v-btn>
</td>
<td v-else>
<v-btn color="red">
Belum Dinilai
</v-btn>
</td>
<td>
<v-btn class="ml-4" @click="openDialog">Buka PDF</v-btn>
</td>
</tr>
</template>
</v-data-table>
</v-card>
<v-dialog v-model="dialog" max-width="800">
<v-card>
<v-card-title>PDF Viewer</v-card-title>
<v-card-text style="max-height: 450px;">
<pdf style="height: 430px;" :src="pdfSrc" :page="1" :show-all="false"></pdf>
</v-card-text>
<v-card-actions>
<v-btn @click="closeDialog" class="bg-red">Tutup</v-btn>
<v-btn @click="ubahNilai(item)" class="bg-green">Validasi Nilai</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
这是脚本设置
<script setup>
import { ref, computed } from 'vue';
import pdf from '../components/Pdf.vue';
const search = ref("");
const headers = ref([
{
align: 'start',
key: 'name',
sortable: false,
title: 'Nama Karyawan',
},
{ align: 'center', key: 'nip', title: 'NIP' },
{ align: 'center', key: 'unitKerja', title: 'Unit Kerja' },
{ align: 'center', key: 'forkom', title: 'Forkom Wilayah Domisili' },
{ align: 'center', key: 'status', title: 'Status' },
{ align: 'center', key: 'actions', title: 'Actions' },
]);
const desserts = ref([
{
name: 'Frozen Yogurt',
nip: '092384029834',
unitKerja: 'SIRS',
forkom: 'Lamongan',
status: 'Sudah Dinilai',
},
{
name: 'Ice cream sandwich',
nip: '8901284928',
unitKerja: 'SPI',
forkom: 'Solokuro',
status: 'Belum Dinilai',
},
{
name: 'Eclair',
nip: '342193082234',
unitKerja: 'IGD',
forkom: 'Paciran',
status: 'Sudah Dinilai',
},
{
name: 'Cupcake',
nip: '0918023958',
unitKerja: 'IPS',
forkom: 'Sugio',
status: 'Belum Dinilai',
},
{
name: 'Gingerbread',
nip: '23841083205',
unitKerja: 'MR',
forkom: 'Deket',
status: 'Sudah Dinilai',
},
{
name: 'Jelly bean',
nip: '75609719502',
unitKerja: 'Farmasi',
forkom: 'Babat',
status: 'Belum Dinilai',
},
]);
const dialog = ref(false);
const pdfSrc = ref('../assets/Surat Hasil Verifikasi MD.pdf');
const openDialog = () => {
dialog.value = true;
};
const closeDialog = () => {
dialog.value = false;
};
const ubahNilai = (item) => {
// console.log(item.status);
item.status = "Sudah Dinilai";
console.log('berhasil update');
closeDialog;
};
const filterKeyStatus = ref(["Semua", "Sudah Dinilai", "Belum Dinilai"]);
const selectedFilterStatus = ref("Semua");
const filterKeyUnit = ref(["Semua", "SIRS", "SPI", "IGD", "IPS", "MR", "Farmasi"]);
const selectedFilterUnit = ref("Semua");
const filterKeyForkom = ref(["Semua", "Lamongan", "Babat", "Sugio", "Solokuro", "Paciran", "Deket"]);
const selectedFilterForkom = ref("Semua");
const filteredItems = computed(() => {
let filteredItems = desserts.value;
if (selectedFilterStatus.value !== "Semua") {
filteredItems = filteredItems.filter(item => item.status === selectedFilterStatus.value);
}
if (selectedFilterUnit.value !== "Semua") {
filteredItems = filteredItems.filter(item => item.unitKerja === selectedFilterUnit.value);
}
if (selectedFilterForkom.value !== "Semua") {
filteredItems = filteredItems.filter(item => item.forkom === selectedFilterForkom.value);
}
return filteredItems;
});
</script>
打开对话框时需要保存该项目,因为该项目只能在表格中使用,而不能在对话框中使用。