Checkbox not checking?



  • 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?



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

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



  • 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.



  • 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.



  • 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.



  • 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.



  • 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.


Log in to reply