I’ve configured a server where I fetch data from an endpoint.
This data has been printed in a v-table
component and working perfectly, but I’m having issues with v-data-table-server
component.
There’s something wrong and I can’t figure out what it is.
<template>
<v-container>
<div class="d-flex mb-8">
<div class="flex-1-1 mr-2">
<h1 class="text-h4">Fieldeas Demo</h1>
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="w-100" style="max-width:240px">
<v-select
:items="fetchOptions"
v-model="selectedFetchOption"
label="Base de datos"
hide-details="auto"
@update:modelValue="fetchData"
></v-select>
</div>
</div>
<div class="d-flex align-center v-row mb-2 w-50">
<div class="v-col">
<v-text-field
v-model="input_filter"
hide-details="auto"
label="Filtro"
@update:modelValue="fetchData"
></v-text-field>
</div>
<div class="v-col">
<v-text-field
v-model="input_year"
hide-details="auto"
label="Año"
type="number"
hide-spin-buttons
@update:modelValue="fetchData"
></v-text-field>
</div>
</div>
<div>
<v-alert v-if="error" type="error">{{ error }}</v-alert>
<v-data-table-server
v-if="data"
v-model:items-per-page="itemsPerPage"
:headers="data.fields"
:items="data.rows"
:items-length="data.rowCount"
loading-text="Cargando... Por favor espera"
loading
>
<template v-slot:headers="{ headers }">
<tr>
<th v-for="(header, index) in headers" :key="index">{{ header.name }}</th>
</tr>
</template>
<template v-slot:tbody="{ items }">
<tr v-for="(item, index) in items" :key="index">
<td v-for="(value, i) in item" :key="i">{{ value }}</td>
</tr>
</template>
</v-data-table-server>
</div>
</v-container>
</template>
<script>
import { toRaw } from 'vue';
import { useFetch } from '@/hooks/useFetch'
export default {
data() {
return {
data: null,
error: null,
loading: false,
fetchOptions: [
'fieldeas_tracktrace_pre',
'gaa_report',
],
selectedFetchOption: 'fieldeas_tracktrace_pre',
sqlFile: 'test',
input_filter: null,
input_year: null,
itemsPerPage: 10,
}
},
async created() {
await this.fetchData()
console.log(this.data)
console.log(toRaw(this.data))
},
methods: {
async fetchData() {
let url = `http://localhost:3000/api/queries/${this.selectedFetchOption}/sql/${this.sqlFile}`
const params = []
if (this.input_filter) params.push(`content_filter=${this.input_filter}`)
if (this.input_year) params.push(`year=${this.input_year}`);
if (params.length > 0) url += `?${params.join('&')}`
const { data, error, loading } = await useFetch(url);
this.data = data
this.error = error
this.loading = loading
},
},
}
</script>
This is a screenshot of the data object