点击事件时无法显示v-data-table行的值？

Question

我试图在 v-data-table 外部的另一个容器中单击时显示 v-data-table 行的数据。我尝试了可扩展的 v-data-table 行，但这根本不起作用，所以尝试这种方式：

这是我的代码：

<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>
          <pre>{{ selectedCurrency.value }}</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' }
];
const selectedCurrency = ref({});

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

const handleCurrencyClick = (currency) => {
  selectedCurrency.value = currency.value;
  console.log(selectedCurrency.value);
};
</script>

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

我想显示单击的特定行的 JSON 或原始数据：

Answer 1

@click:row

是 Vuetify 2 数据表组件中的一个事件。并非 Vuetify 2 中的所有内容都转移到了 Vuetify 3...如果 Vuetify 3 文档中没有它，您应该假设它不存在并寻找替代解决方案。

您可以使用 item slot 来替换行的默认呈现，以便您可以向其添加单击事件侦听器。

<v-data-table 
  :items="currencies" 
  :headers="headers" 
  dense
>
  <template v-slot:top>
    <v-toolbar flat>
      <v-toolbar-title>Version {{ info.VRSCversion }}</v-toolbar-title>
    </v-toolbar>
  </template>
  <template v-slot:item="{ item }">
    <tr @click="handleCurrencyClick(item)">
      <td v-for="val in item">{{ val }}</td>
    </tr>
  </template>
</v-data-table>