Displaying checkbox selected rows with vuejs

Question

I'm starting out with vuejs and a vue grid at https://jsfiddle.net/kc11/7fqgavvq/2/.

I want to display the checked row objects in the:

    <pre> {{ selected| json}} </pre>

at the bottom of the table. I've come across Check all checkboxes vuejs with an associated fiddle at https://jsfiddle.net/okv0rgrk/206/ that shows what I mean if you look at the outputted Selected Ids.

To get this working I'll need to add a method to the table component similar to

methods: {
    selectAll: function() {
        this.selected = [];
        for (user in this.users) {
            this.selected.push(this.users[user].id);
        }
    }

in https://jsfiddle.net/okv0rgrk/206/

Can someone explain this function as I am having trouble in particular with what 'this' means in this context.

Jeff · Accepted Answer · 2016-01-07 23:48:41Z

1

this refers to your component. So anything inside of your component can be called using this. You can access data with this.users or this.selected, run methods with this.selectAll() or access anything else in your component.

In that fiddle, there is a users attribute on the data, so this.users refers to that array. The function selectAll() empties the this.selected array, then goes through and re-adds every user to the array, this.selected.

Edit -- computed properties

Add this to your component:

computed:{
    userCount: function(){
        return this.users.length;
    }
}

then, anywhere in this component, this.userCount will return the number of users. This variable will update anytime the number of users changes. That is why its a "computed" property - you don't have to update, it just automatically recalculates when it needs to.

edited Jan 7, 2016 at 23:48

answered Jan 7, 2016 at 21:45

Jeff

25.3k4 gold badges73 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1592380 Over a year ago

Thanks Jeff, that helps a lot. As quick follow up if I may: In jsfiddle.net/kc11/7fqgavvq/2 I'm using a vue component which has its own methods. To write a method that counts the checkboxes should I write the method in the vue instance methods or in the component methods?

Jeff Over a year ago

Within the component, this refers to the component, and that sort of thing belongs to the component. You can use a computed property for this, so after your methods:{} you could include an object called computed:{}. The methods within computed can be accessed like normal variables. See my edit for how this would work

Jeff Over a year ago

To clarify my earlier answer, this always refers to the current component you are in, not the original vue instance. I'll edit to clarify that.

Collectives™ on Stack Overflow

Displaying checkbox selected rows with vuejs

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related