在v-dialog中调用ubahNilai函数时出现TypeError错误求助

错误原因 #

1. 变量作用域问题：v-dialog不在v-data-table的item插槽作用域内，点击对话框中的「Validasi Nilai」按钮时，item变量不存在，导致传递给ubahNilai的参数是undefined，无法设置item.status。
2. 函数调用遗漏：ubahNilai函数里的closeDialog仅引用了函数，未执行调用（缺少括号）。

解决方案 #

步骤1：添加当前条目存储变量 #

在<script setup>中添加一个ref变量，用来保存点击打开对话框时的当前行数据：

const currentItem = ref(null);

步骤2：修改openDialog函数，接收并保存当前条目 #

更新openDialog函数，将点击行的item赋值给currentItem：

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

步骤3：调整模板中的按钮事件 #

• 修改数据表格里的「Buka PDF」按钮，传递当前行的item：

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

• 修改对话框中的「Validasi Nilai」按钮，直接调用ubahNilai（无需传参，直接使用currentItem）：

<v-btn @click="ubahNilai" class="bg-green">Validasi Nilai</v-btn>

步骤4：修复ubahNilai函数 #

更新函数逻辑，使用currentItem并正确调用closeDialog：

const ubahNilai = () => {
  if (currentItem.value) {
    currentItem.value.status = "Sudah Dinilai";
    console.log('berhasil update');
    closeDialog(); // 添加括号执行函数
  }
};

修改后的完整核心代码片段 #

Template部分 #

<v-data-table
  :headers="headers"
  :items="filteredItems"
  :search="search"
  :items-per-page="5">
  <template v-slot:item="{ item }">
    <tr style="text-align: center;">
      <!-- 省略其他列 -->
      <td>
        <v-btn class="ml-4" @click="openDialog(item)">Buka PDF</v-btn>
      </td>
    </tr>
  </template>
</v-data-table>

<v-dialog v-model="dialog" max-width="800">
  <v-card>
    <!-- 省略其他内容 -->
    <v-card-actions>
      <v-btn @click="closeDialog" class="bg-red">Tutup</v-btn>
      <v-btn @click="ubahNilai" class="bg-green">Validasi Nilai</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>

Script Setup部分 #

import { ref, computed } from 'vue';
import pdf from '../components/Pdf.vue';

// 新增变量
const currentItem = ref(null);

// 省略其他变量定义

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

const ubahNilai = () => {
  if (currentItem.value) {
    currentItem.value.status = "Sudah Dinilai";
    console.log('berhasil update');
    closeDialog();
  }
};

// 省略其他函数与计算属性

内容的提问来源于stack exchange，提问作者Febryan Akhdani