q-table in conjunction with mysql in quasar framework

[quasar_beginner]

Hi,
I’m new here and it’s my first post because i’m a quasar beginner.

I defined a table to show projects of a month. I’m calling my DB-rountine at “mounted” based on the current date. The table shows the projects of the month based on the current date (i.e. april). everything ok - the db-lines are shown.

I have added a qchip with calendar icon and qdate that the user can select another month for project reviewing. If I select March, the db-routine will be called and all db entries retrieved from the routine.

My array is named tabledate which I fill up with “this.tabledate = response.data” (axios-call). The tabledate-array has 4 entries but the qtable will not be refreshed with the March-Data! Hmmmm…

Any idea what is wrong in my process to see month-specific data?

Best regards from Germany
Henry

[s.molinari]

Being able to see some code would help. But, how are you calling the server for the new data and how is that getting loaded into your component? The mounted hook will only do it one time, when the component is rendered.

Scott

[quasar_beginner]

Hi Scott, thx for your reply,

Here are some code lines:

// Calendar date selection
<q-chip clickable color…>
<q-popup-proxy…>
<q-date v-model=“selectedDate”…>
<div class=row…>
<q-btn label=“ok” color… @click=getProjMonth(selectedDate)
</div>
</q-date>
</q-popup-proxy>
</q-chip>
// Project table
<div class="…">
<q-table
:grid="$q.screen.xs"
:hide-header="$q.screen.xs"
:data=“tabledata”
:columns=“columns”
:row-key=“uid”
no-data-label=“no projects found”
…

export default {
data () {
return {
…
tabledata: [],
selectedDate: ‘’,
monthstart: ‘’,
monthend: ‘’,
…
}
}
mounted () {
this.selectedDate = new Date()
this.getProjMonth(this.selectedDate)
}
methods: {
getProjMonth (selday) {
let fmDate = date.formatDate(selday, ‘YYYY-MM-DD’)
this.monthstart = date.startOfDate(fmDate, ‘month’)
this.monthend = date.endOfDate(fmDate, ‘month’)
this.monthstart = date.formatDate(this.monthstart, ‘YYYY-MM-DD’)
this.monthend = date.formatDate(this.monthend, ‘YYYY-MM-DD’)
this.getProjData(this.monthstart, this.monthend)
}
getProjData (monthstart, monthend) {
return this.$axios.get(’/api/projects.php’ , {
params: {
func: ‘getProjMonth’,
start: monthstart,
end: monthend
}
})
.then((response) => {
this.tabledata = response.data
})
.catch…
},

as I mentioned earlier, the this.tabledata array isn’t empty when I load the response.data to tabledata (axios-call) but the table will show only the "no-data-label-text

Thanks for looking deeper into my problem.

Bavarian regards, Henry

[s.molinari]

When you put code in here, wrap it with two sets of three backticks.

Like this -> 2 x ```

And make sure it is semi-formatted i.e. with some indentation.

Scott

[s.molinari]

So, to your problem. What does the data look like that you are giving to the table? Where is the columns array?

Scott