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

          title="All Reports"
            v-show=" !== 'Default'"
                @input="toggleCheckboxes(props.row.__index, props.row)"

    some Vue code:

    import UserReportsLists from '../../components/userReports' // this is an object in a text file
    export default {
        created () {    
        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 = => { return obj.report_name === })
              console.log('currentMyReport', currentMyReport)
              if (typeof currentMyReport !== 'undefined' && currentMyReport !== null) {
                el.myReport = true
                el.myReportID =
              } else {
                el.myReport = false
                el.myReportID = null
            console.log('allReports', allReports)
            this.$store.dispatch('account/setAllReports', allReports)

    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