Checkbox not checking?

rconstantine

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?

rconstantine

BTW, Changing v-model to :value in the checkbox doesn’t help.

Neither does removing the @input (which of course disconnects my DB calls).

rconstantine

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.

metalsadman

show what your checktogle… function does, you probably didnt update props.selected to true, thats what your v-model should take btw, not the actual value of your row. Is this pre v1? Youre seem to be using a deprecated slot syntax. Note. Be sure that what you pass in your row-key is unique like an id for example.

rconstantine

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.

metalsadman

i assume the checkbox is not the qtable generated one when you turn selection if its not then what youve shown is fine, about the syntax, it will still work ftb.

rconstantine

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.

No More Posting New Topics!

Checkbox not checking?