Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

vincej's avatar
Level 15

Vuejs: How to recover ID of specific checkbox

I'm totally new to Vue, so dumb question time!

I have a series of checkboxes on the page. Their status ie checked or unchecked are pulled from L8 and applied to the form. It works, but I hope I have done that part correctly! Great. When a user changes the status of a checkbox, say from checked to unchecked I need to uniquely identify that specific child_id. What I have at the moment grabs ALL the checkbox statuses. Not ideal, as I will then use axios to post that specific child_id back to the server, and I don't want to send the whole array every time a user changes one check box. So, this what I have so far:

From the template

<tbody v-for="child in Children">
          <tr>
            <td class="col-4"><a :href="'/getchild/'+ child.child_id">{{child.childFirstName}}</a></td>
            <td class="col-4"> {{child.childLastName}}</td>
            <td class="col-4">
              <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" ref="child.child_id" :id="child.child_id" :value="child.child_id" v-model="child.status" @change="Checked" >
                <label class="custom-control-label" v-bind:for="child.child_id">Absent / Present</label>
              </div>
            </td>
          </tr>
          </tbody>

From the script:

<script>
      export default {
        data: function () {
          return {
           Children: []
          }
        },
        mounted() {
        this.loadChildren();
        },

        methods:{
          Checked:function(){
            console.log(this.$refs)
          },

          loadChildren:function (){
            axios.get('/api/allChildren')
            .then((response)=>{this.Children = response.data.data;
            })
            .catch(function (error){
                console.log(error);
              }
             );
          }
        }
    }
    </script>

Many thanks for your help!!

0 likes
5 replies
piljac1's avatar
piljac1
Best Answer
Level 28

Hi ! You're really close actually, but you have too many unnecessary elements.

First of all, you don't need $refs except if you have to interact with the element by using vanilla JS (useful to bind some third party library events).

Second of all, you don't need the value property because you can manage what (and how) you want to send data to your PUT/PATCH route which updates the child status.

There are minor fixes that can be applied, but for that, you can check out the sandbox I created. Of course, you shouldn't need the changedChild data property. I only used it to output what's happening visually. Also, I changed you href for # because it's just a test environnement. I also mocked some children because I don't have access to your API.

Basically, what you need to do is pass your current child as a parameter to the function you call on change. In my sandbox, I renamed the function to updateChildStatus, because that's probably what you're gonna do in that function. That being said, that's the syntax:

@change="updateChildStatus(item)"

Then you can accept the item as a parameter in your updateChildStatus method declaration. From there, manage the information to transform it as you wish and then PATCH (or PUT) it.

vincej's avatar
Level 15

This is very kind of you. Just letting you know that I have been ill and will give this attention in the next day or two. Cheers!

vincej's avatar
Level 15

Well I finally got to look at your code. Thank you! It works perfectly! I did not cut and paste, I studied it carefully to aid my own learning. The :key thing was curious to start. I then managed to get the results of the checkbox selection into axios for a return to L8. For me, Vue is interesting in that JS dom manipulation and selection can be tiresome with all those id's and classes.

So - now, beware - you are the "go-to" guy for Vue help! :o)

Many thanks !!

piljac1's avatar

At first, some fundamentals are hard to grasp, but after working on a couple of Vue projects, it becomes routine :). I get a week off starting on April 5th, so I'll probably spend a lot of time on Laracasts to help you and others out with future questions haha. I also had a feature idea in mind for Inertia, so I'll work on that to hopefully come up with a pull request that would bring a good benefit to the related stack.

Please or to participate in this conversation.