点击v-data-table行后无法展示行数据？求解决方案

问题分析 #

你的代码里有两个关键问题导致无法正确展示选中行的原始数据：

• @click:row 传递的参数直接就是当前行的完整数据对象，不需要额外取.value
• 直接输出对象会显示[object Object]，需要用JSON.stringify格式化后才能展示可读的JSON结构

修改后的完整代码 #

<template>
  <v-layout>
    <v-row>
      <v-col>
        <h1>Currencies</h1>
        <v-container class="mx-auto pa-6">
          <v-data-table 
            :items="currencies" 
            :headers="headers" 
            dense
            @click:row="handleCurrencyClick"
          >
            <template v-slot:top>
              <v-toolbar flat>
                <v-toolbar-title>Version {{ info.VRSCversion }}</v-toolbar-title>
              </v-toolbar>
            </template>
          </v-data-table>
        </v-container>
      </v-col>
    </v-row>
    <v-row v-if="selectedCurrency">
      <v-col>
        <v-container class="mx-auto pa-6">
          <h2>Selected Currency Info</h2>
          <!-- 用JSON.stringify格式化数据，添加缩进提升可读性 -->
          <pre>{{ JSON.stringify(selectedCurrency, null, 2) }}</pre>
        </v-container>
      </v-col>
    </v-row>
  </v-layout>
</template>

<script setup>
import { ref } from 'vue';
import currencyHelpers from '../lib/currencyHelpers';

const info = ref({});
const currencies = ref([]);
const headers = [
  { title: 'Name', value: 'currencydefinition.fullyqualifiedname' },
  { title: 'ID', value: 'currencydefinition.currencyid' },
  { title: 'ID rego fee', value: 'currencydefinition.idregistrationfees' },
  { title: 'ID import fee', value: 'currencydefinition.idimportfees' },
  { title: 'Converter Name', value: 'currencydefinition.gatewayconvertername' },
  { title: 'Proof Protocol', value: 'currencydefinition.proofprotocol' },
  { title: 'Options', value: 'currencydefinition.options' }
];
// 初始值设为null，确保未选中时不展示下方容器
const selectedCurrency = ref(null);

(async () => {
  info.value = await currencyHelpers.getInfo();
  currencies.value = await currencyHelpers.listCurrencies();
})();

// 直接使用传递过来的currency对象，不需要取.value
const handleCurrencyClick = (currency) => {
  selectedCurrency.value = currency;
  console.log(selectedCurrency.value);
};
</script>

<style scoped>
.ovflvdt {
  max-width: 500px;
}
</style>

关键修改点 #

1. 修正行点击事件的赋值逻辑：

   const handleCurrencyClick = (currency) => {
     selectedCurrency.value = currency; // 去掉多余的.value
   };
   

2. 格式化JSON展示：

   <pre>{{ JSON.stringify(selectedCurrency, null, 2) }}</pre>
   

   • JSON.stringify的第二个参数null表示不过滤属性，第三个参数2表示用2个空格缩进，让JSON结构更清晰
3. 优化初始值判断：

   const selectedCurrency = ref(null);
   

   空对象{}在Vue的v-if判断中会被视为true，设为null可以确保未选中行时，下方的信息容器完全隐藏

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