当我尝试在 v-dialog 中使用函数时，出现错误“未捕获类型错误：无法设置未定义的属性（设置“状态”）”

Question

我正在尝试在我的 v 对话框中使用函数

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>

Answer 1

打开对话框时需要保存该项目，因为该项目只能在项目表中使用，而不能在对话框中使用。

//template

<v - btn class = "ml-4"@click = "openDialog(item)" > Buka PDF < /v-btn>

//script

crrentItem = {}
const openDialog = (item) => {
  dialog.value = true;
  crrentItem = item
};

const ubahNilai = () => {
  crrentItem.status = "Sudah Dinilai";
  closeDialog;
};