Evento de clicar em um jogo

src/frontend/src/components/TabelaDeJogos.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Jogo, { estados, precos } from '@/modelo/Jogo';
-import { Column, DataTable, InputText, Select, type DataTableFilterMeta } from 'primevue';
+import { Badge, Column, DataTable, InputText, Select, type DataTableFilterMeta } from 'primevue';
 import { ref } from 'vue';
 import ComponenteDeEstado from './ComponenteDeEstado.vue';
 import ComponenteDePreco from './ComponenteDePreco.vue';
@@ -9,6 +9,10 @@ defineProps<{
   jogos: Jogo[]
 }>();
 
+defineEmits<{
+  selecionarJogo: [jogo: Jogo]
+}>();
+
 const filtros = ref({
   nome: { value: null, matchMode: 'contains' },
   loja: { value: null, matchMode: 'equals' },
@@ -25,20 +29,22 @@ function lojas(jogos: Jogo[]): string[] {
 
 <template>
   <DataTable v-model:filters="filtros" :value="jogos" sort-mode="multiple" data-key="id" filter-display="row"
-    :globalFilterFields="['nome', 'estado', 'loja', 'preco']">
+    :globalFilterFields="['nome', 'estado', 'loja', 'preco']" row-hover
+    @row-click="$emit('selecionarJogo', $event.data)">
 
     <Column field="nome" sortable header="Nome">
       <template #filter="{ filterModel, filterCallback }">
-        <InputText type="text" v-model="filterModel.value" @input="filterCallback()" />
+        <InputText type="text" v-model="filterModel.value" @input="filterCallback" />
       </template>
       <template #body="{ data }">
-        {{ data.nome }} <span v-if="data.ano">({{ data.ano }})</span>
+        {{ data.nome }}
+        <Badge v-if="data.ano" :value="data.ano" severity="secondary" />
       </template>
     </Column>
 
     <Column field="estado" sortable header="Estado" :show-filter-menu="false">
       <template #filter="{ filterModel, filterCallback }">
-        <Select v-model="filterModel.value" @change="filterCallback()" :options="estados" :show-clear="true">
+        <Select v-model="filterModel.value" @change="filterCallback" :options="estados" :show-clear="true">
           <template #option="slotProps">
             <ComponenteDeEstado :estado="slotProps.option" />
           </template>
@@ -51,14 +57,14 @@ function lojas(jogos: Jogo[]): string[] {
 
     <Column field="loja" sortable header="Loja">
       <template #filter="{ filterModel, filterCallback }">
-        <Select v-model="filterModel.value" @change="filterCallback()" :options="lojas(jogos)"
+        <Select v-model="filterModel.value" @change="filterCallback" :options="lojas(jogos)"
           :show-clear="true"></Select>
       </template>
     </Column>
 
     <Column field="preco" sortable header="Preço">
       <template #filter="{ filterModel, filterCallback }">
-        <Select v-model="filterModel.value" @change="filterCallback()" :options="precos" :show-clear="true">
+        <Select v-model="filterModel.value" @change="filterCallback" :options="precos" :show-clear="true">
           <template #value="{ value }">
             <ComponenteDePreco v-if="value" :preco="value" />
           </template>