q-table shows not data

PrasadChinwal

I have implemented q-table. The problem is the axios request returns data which I can see in console. But, when the request completes q-table shows No data available.

Interestingly console has no errors at all. So kind of lost.

What I have tried.

Doubled checked all variables. Data attribute, columns etc.
Checked typeof data returned.
I have another q-table which works perfectly.

Screen Shot 2020-01-31 at 8.54.03 AM.png

Edit:

<q-table
			title="Report by date"
			:data="results"
			:columns="columns"
			row-key="sign_in"
			:pagination.sync="pagination"
			:loading="loading"
			:filter="search"
			:visible-columns="visibleColumns"
			:selected-rows-label="getSelectedString"
			selection="multiple"
			:selected.sync="selected"
			color="secondary"
		>
			<template v-slot:top-right>
				<download-excel :data = "exportData">
					<div style="min-width: 250px; margin-bottom: 15px;">
						<button> Export <q-icon name="cloud_download" /></button>
					</div>
				</download-excel>

				<q-space />

				<q-select
					v-model="visibleColumns"
					multipleborderlessdenseoptions-dense
					:display-value="$q.lang.table.columns"
					emit-value map-options :options="columns"
					option-value="name" style="min-width: 250px" color="secondary"
				/>

				<q-space />

				<div style="margin-bottom:15px" >
					<q-input borderless dense debounce="300" v-model="search" placeholder="Search">
						<template v-slot:append>
							<q-icon name="search" style="margin-top:5px;"/>
						</template>
					</q-input>
				</div>
			</template>
		</q-table>

Script:

data () {
		return {
			search: '',
			reportSearchFormParams: {
				startdate: '',
				enddate: '',
				netid: ''
			},
			user: window.$_User,
			url: process.env.MIX_APP_URL,
			selected: [],
			visibleColumns: ['name', 'sign_in', 'sign_out', 'sign_in_comments', 'sign_out_comments'],
			columns: [
				{ name: 'studentName', align: 'center', label: 'Name', field: row => row.user.full_name, sortable: true },
				{ name: 'sign_in', label: 'Sign In', field: 'signin', sortable: true },
				{ name: 'sign_out', label: 'Sign Out', field: 'signout', sortable: true },
				{ name: 'sign_in_comments', label: 'Sign in comments', field: 'signin_comments' },
				{ name: 'sign_out_comments', label: 'Sign out comments', field: 'signout_comments' },
			],
			results:[],
			loading: false,
			pagination: {
				sortBy: 'sign_in',
				descending: false,
				page: 2,
				rowsPerPage: 10
			},
		}
	},
	mounted() {

	},
	computed: {
		visibleColumnsSorted: {
			// getter
			get: function () {
				let yht = this.columns;
				let yh = yht.sort((a, b) => a.label.localeCompare(b.label));
				let columnFilter = [];
				yh.forEach(function(val,index){
					columnFilter[index] = val['name'];
				});
				return columnFilter;
			},
			// setter
			set: function (newValue) {
				this.visibleColumns = newValue;
			}
		}
	},
	created() {
		this.sortVisibleColumns();
	},
	computed: {
		exportData() {
			return this.export();
		}
	},
	methods: {
		getReportByDate() {
			this.loading = true;
			console.log(this.reportSearchFormParams);
			axios.get(this.url + '/api/userreport/?filter[sign_in_from]=' + this.reportSearchFormParams.startdate +
				'&filter[sign_in_to]=' + this.reportSearchFormParams.enddate + '&include=user'
			).then((response) => {
				this.loading = false;
				this.results = (response.data);
				console.log(this.results);
			}).catch(error => {
				console.log(error);
			});
		},
}

Any help is appreciated.

chyde90

There are multiple possible reasons why this could fail to work. I cannot help without seeing some code.
If you want to make a codepen/jsfiddle, the urls on this site get you started: https://quasar.dev/start/playground

PrasadChinwal

@chyde90 Thanks for the reply. I edited the post.

chyde90

Looks like your method getReportByDate is never called.
That log message from your screenshot… is it really from the log statement in your .then-callback of your Axios call?
If so, something crucial is missing from the code snippet that you showed us.

PrasadChinwal

@chyde90 Thanks so much for checking. The method getReportByDate gets called on click of button.

Also yes the log message is from the response in the then-callback. I do not understand either. Also there are no error logs in the console. Which is really bugging me.

metalsadman

@PrasadChinwal you also have 2 computed options in your snippet above, there shouldn’t be a problem using axios and assigning the result as data for the table, judging it is in the correct form/shape and not missing properties you have in your columns definition, so my guess is there’s something buggy in your code.

chyde90

Well, then it’s indeed strange. I don’t see a reason why this wouldn’t work.

I see that you have VueDevtools installed. When you inspect the QTable with it, does the data-property have the correct data?

PrasadChinwal

@metalsadman That’s true. It’s literally bugging me since I have almost the same table in another component which works perfectly.

PrasadChinwal

@chyde90 Yes. It does. Here is another screenshot.

Screen Shot 2020-01-31 at 11.50.48 AM.png

This is so weird.

chyde90

@PrasadChinwal So the QTable definitely has got the data, and there is no error in the console. Now, the only thing that could go wrong is that there is some kind of reactivity issue.
I have an idea: For testing purposes, please put the following in your response callback:

setTimeout(() => this.results = this.results.concat([]), 3000);

This is not a solution - but if you now (after 3 seconds) see the data, we have a clue where to search in order to actually fix the problem.

PrasadChinwal

@chyde90 I dont see the data in vue devtools for QTable. Do we have a clue on how to proceed? I really appreciate your help.

chyde90

@PrasadChinwal You don’t? But in the post before you said you do (and it’s in the screenshot). Or do you mean after you included the setTimeout thing? I’m confused

PrasadChinwal

@chyde90 My Bad. I do not see any data after adding the setTimeout();

chyde90

@PrasadChinwal uhhhm… really??^^
Just to make sure - you wrote it like this:

getReportByDate() {
	...
	axios.get( ... ).then((response) => {
		this.loading = false;
		this.results = (response.data);
		console.log(this.results);
		setTimeout(() => this.results = this.results.concat([]), 3000); // <--- this line added
	}).catch(error => {
		console.log(error);
	});
},

Right?
I expect either no changes at all, or that the table suddenly renders what you want to see.
Because this effectively does not do anyhing except triggering an update.

PrasadChinwal

@chyde90 Oh I see what you mean. I tried concatenating the response again in the timeout.

Unfortunately even with the above approach, as you mentioned there is no change at all. The data is present in devtools QTable but not displayed.

PrasadChinwal

@chyde90 Gist to File

chyde90

HAH! I think I found it!
You initialize pagination with page 2. Initialize it with 1 - does it work now?

PrasadChinwal

Oh dear lord ! Yes. I do see the data. I feel so stupid.
Anyways, Thanks a lot for helping out and I apologize for hogging your time.

chyde90

Yayyyy :DD Hey no problem… it was fun^^
No need to feel stupid there. It wasn’t really obvious because the pagination wasn’t visible.

Here is a tip / how I solve this kind of problem:
Remove everything from the code that is not needed to replicate the problem, feature by feature. And everytime test if you can reproduce the problem.
So when the problem doesn’t occur anymore, you know which part caused it. And if not, then you at least have a simpler and shorter version where you can spot it more easily

PrasadChinwal

@chyde90 That’s a really great advise. I really am thankful. I will try and use this trick whenever applicable. Have a great day ahead!

No More Posting New Topics!

q-table shows not data

What I have tried.