Couldn’t get it to work, so I replaced it with the built in checkbox and the selected stuff (i.e. selection=“multiple” and :selected.sync=“selectmyreports”). It’s kind of annoying to have to populate the contents of the selected prop, but oh well. At least it’s working.
Is there a way on a multiple select to disable the auto-created “select all” checkbox that sits in the header? If it’s in the docs, I missed it.
I’ll take a look at all of that on Monday. To answer what I know off the top of my head…
-The project began as version 0.15 and was upgraded in-place to 0.17 just short of 1.0 but I have now updated to 1.05 as of a few weeks ago.
-I didn’t realize the slot syntax changed as pretty much most of the files from my 0.15/0.17 version didn’t throw errors and worked without too many changes when I copied them over to the new project. Can you point me to documentation? I don’t recall seeing this in the migration docs.
-Why wouldn’t v-model take the value of the row if that’s what it is I want to show and what I want updated? It seems to work in other tables I have made. Plus, the other columns (not shown in the above code) use the respective value from the row, so why would a checkbox be different? Or is there a way to tie the props.selected to the myReports value for that row?
-I’ve never had to use a toggle function before. I’ll look in the docs for it.
-row-key (name) is a unique value.
To summarize - I think the toggling of the checkbox should work all by itself, and I don’t think I’m doing anything to block it in the code above.
BTW, Changing v-model to :value in the checkbox doesn’t help.
Neither does removing the @input (which of course disconnects my DB calls).
I’m following the same pattern I’ve been using for checkboxes in tables which need to immediately save their state to the DB. However, this time, when I click a checkbox, the circle indicating I clicked it shows up, but the state of the checkbox doesn’t change.
Has anyone seen this behavior?
If I let the method called by the @input event happen, the DB is properly updated - either adding or deleting a record corresponding to the box checked for the row in which it sits.
So the UI just isn’t right.
If I logout and back in, or otherwise refresh the page, any changes I made, and which were saved to the DB show up properly - i.e. boxes which should be checked are, and those which should not, aren’t.
Here is some code:
portion of template
<q-table
title="All Reports"
:data="reportList"
:columns="columns"
row-key="name"
:separator="reportSeparator"
:filter="reportFilter"
:rows-per-page-options=rowsPerPage
:pagination.sync="pagination"
>
<q-tr
v-show="props.row.name !== 'Default'"
slot="body"
slot-scope="props"
:props="props">
<q-td
key="myReport"
:props="props"
>
<q-checkbox
v-model="props.row.myReport"
@input="toggleCheckboxes(props.row.__index, props.row)"
/>
</q-td>
</q-tr>
</q-table>
some Vue code:
<script>
import UserReportsLists from '../../components/userReports' // this is an object in a text file
export default {
created () {
this.getMyReports()
},
computed: {
reportList () {
if (typeof this.$store.state.account.allReports !== 'undefined' && this.$store.state.account.allReports !== null) {
return this.$store.state.account.allReports
} else {
return [{}]
}
}
}
methods: {
getMyReports () {
let userID = this.$store.state.account.userID
let allReports = UserReportsLists.reportList
console.log('userID', userID)
this.$axios.get('/adminusers/myReports/' + userID).then(res => {
console.log('myReports from DB', res)
// add a bool to each report for the checkbox and set to MyReport values, if exists
allReports.forEach(el => {
let currentMyReport = res.data.find(obj => { return obj.report_name === el.name })
console.log('currentMyReport', currentMyReport)
if (typeof currentMyReport !== 'undefined' && currentMyReport !== null) {
el.myReport = true
el.myReportID = currentMyReport.id
} else {
el.myReport = false
el.myReportID = null
}
})
console.log('allReports', allReports)
this.$store.dispatch('account/setAllReports', allReports)
})
}
}
</script>
Note that I’m merging the object from the file (userReports/index.js) with data from the DB, then storing it in a Vuex store. The store is then called in the computed field which is used in the v-model of the checkbox via props.row.
What am I missing here?
Got it working for those who might find this:
<!--
Forked from:
https://quasar.dev/vue-components/table#Example--Popup-editing
-->
<div id="q-app">
<div class="q-pa-md">
<q-table
title="Treats"
:data="data"
:columns="columns"
row-key="name"
binary-state-sort
selection="single"
:selected.sync="selected"
>
<template v-slot:body="props">
<q-tr :props="props">
<q-td>
<q-checkbox
v-model="props.selected"
/>
</q-td>
<q-td key="desc" :props="props">
{{ props.row.name }}
<q-popup-edit v-model="props.row.name">
<q-input v-model="props.row.name" dense autofocus counter ></q-input>
</q-popup-edit>
</q-td>
<q-td key="calories" :props="props">
{{ props.row.calories }}
<q-popup-edit v-model="props.row.calories" title="Update calories" buttons>
<q-input type="number" v-model="props.row.calories" dense autofocus ></q-input>
</q-popup-edit>
</q-td>
<q-td key="fat" :props="props">
<div class="text-pre-wrap">{{ props.row.fat }}</div>
<q-popup-edit v-model="props.row.fat">
<q-input type="textarea" v-model="props.row.fat" dense autofocus ></q-input>
</q-popup-edit>
</q-td>
<q-td key="carbs" :props="props">
{{ props.row.carbs }}
<q-popup-edit v-model="props.row.carbs" title="Update carbs" buttons persistent>
<q-input type="number" v-model="props.row.carbs" dense autofocus hint="Use buttons to close" ></q-input>
</q-popup-edit>
</q-td>
<q-td key="protein" :props="props">{{ props.row.protein }}</q-td>
<q-td key="sodium" :props="props">{{ props.row.sodium }}</q-td>
<q-td key="calcium" :props="props">{{ props.row.calcium }}</q-td>
<q-td key="iron" :props="props">{{ props.row.iron }}</q-td>
</q-tr>
</template>
</q-table>
</div>
</div>
new Vue({
el: '#q-app',
data () {
return {
columns: [
{
name: 'desc',
required: true,
label: 'Dessert (100g serving)',
align: 'left',
field: row => row.name,
format: val => `${val}`,
sortable: true
},
{ name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
{ name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true, style: 'width: 10px' },
{ name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
{ name: 'protein', label: 'Protein (g)', field: 'protein' },
{ name: 'sodium', label: 'Sodium (mg)', field: 'sodium' },
{ name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
{ name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }
],
data: [
{
name: 'Frozen Yogurt',
calories: 159,
fat: 6.0,
carbs: 24,
protein: 4.0,
sodium: 87,
calcium: '14%',
iron: '1%'
},
{
name: 'Ice cream sandwich',
calories: 237,
fat: 9.0,
carbs: 37,
protein: 4.3,
sodium: 129,
calcium: '8%',
iron: '1%'
},
{
name: 'Eclair',
calories: 262,
fat: 16.0,
carbs: 23,
protein: 6.0,
sodium: 337,
calcium: '6%',
iron: '7%'
},
{
name: 'Cupcake',
calories: 305,
fat: 3.7,
carbs: 67,
protein: 4.3,
sodium: 413,
calcium: '3%',
iron: '8%'
},
{
name: 'Gingerbread',
calories: 356,
fat: 16.0,
carbs: 49,
protein: 3.9,
sodium: 327,
calcium: '7%',
iron: '16%'
},
{
name: 'Jelly bean',
calories: 375,
fat: 0.0,
carbs: 94,
protein: 0.0,
sodium: 50,
calcium: '0%',
iron: '0%'
},
{
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
sodium: 38,
calcium: '0%',
iron: '2%'
},
{
name: 'Honeycomb',
calories: 408,
fat: 3.2,
carbs: 87,
protein: 6.5,
sodium: 562,
calcium: '0%',
iron: '45%'
},
{
name: 'Donut',
calories: 452,
fat: 25.0,
carbs: 51,
protein: 4.9,
sodium: 326,
calcium: '2%',
iron: '22%'
},
{
name: 'KitKat',
calories: 518,
fat: 26.0,
carbs: 65,
protein: 7,
sodium: 54,
calcium: '12%',
iron: '6%'
}
],
selected: []
}
}
})
Figured it out. I replaced the events with props of type Function. I call them here after checking to make sure the prop is actually a function:
runReport () {
// TODO use the else case to show error, or disable ok button
let path = this.genPDFParamString()
let pdfPath = ''
let here = this
this.$axios.get(path, { timeout: 600000 }).then(res => {
pdfPath = res.data
if (typeof this.pathSet === 'function') {
this.pathSet(pdfPath)
}
if (here.mode === 'pdf') {
if (typeof this.pdfOnly === 'function') {
this.pdfOnly(true)
}
}
}).catch(err => {
pdfPath = 'PDF Error'
console.log('error', err)
if (typeof this.pathSet === 'function') {
this.pathSet(pdfPath)
}
here.$q.notify({ message: 'Error getting PDF path. Try again.', type: 'negative', textColor: 'white', color: 'negative', icon: 'error', closeBtn: 'close', position: 'top' })
})
this.$emit('facility-name', this.facilityOptions.find(obj => obj === this.facility).label.substring(7))
if (this.mode === 'report') {
this.$emit('show-report', true)
} else {
this.$emit('show-report', false)
}
}
I elaborate in this post on the Vue forum: https://forum.vuejs.org/t/4-out-of-6-emit-calls-working-why-dont-the-other-2-work/71186
I dropped a console.log inside of innerEmit. It is getting called just fine.
innerEmit (name, val) {
console.log('am i emitting?', name, val)
this.$emit(name, val)
}
This gets called both times. However, the $emit isn’t reaching the parent. If I call the same $emit just after the axios block (which fires before the result of that block is ready), it does reach the parent file.
So, something is blocking the emit.
This didn’t work:
this.$axios.get(path, { timeout: 600000 }).then(res => {
console.log('res', res)
pdfPath = res.data
console.log('got pdfPath', pdfPath)
this.innerEmit('path-set', pdfPath)
console.log('here mode', here.mode)
if (here.mode === 'pdf') {
console.log('emitting')
this.innerEmit('pdf-only', true)
}
})
where innerEmit is defined thus:
innerEmit (name, val) {
this.$emit(name, val)
}
The axios part is in a method (called runReport) in a vue file’s <script> section which gets called when a user clicks a button, after selecting some parameters. I also tried replacing this.innerEmit by first declaring let hereEmit = this.innerEmit just before the axios call. Still didn’t work. Did hard refreshes of the browser.
I realize this must not be specific to Quasar, so I doubly appreciate the help. I’ll also go looking on SO or something. Maybe this is a Promise issue.
I will try the async thing next. I’m not too good at converting promises to async or the other way. I seem to always miss something.