Select all checkbox with Vue.js (issues with for looping inside a .vue file)

Question

I am looking for how to do a "Select All" checkbox with Vue.js and actually a I kind of found a solution here.

The problem is I am using Vueify and doing everything on my .vue file so some syntax is different then on the example and I can't fix it!

My problem is on this part of the FiddleJS

for (user in this.users) {
    this.userIds.push(this.users[user].id);
}

This for is not recognized on my code I don't know why! If I insert a console.log(user) inside the for it returns:

Uncaught ReferenceError: user is not defined

Somebody knows what is happening?

Is the Reference Error from the browser or from Vue? It is impossible to get an Uncaught ReferenceError: user is not defined in JS as console.log(myUndefinedVariable) is valid. Check what the real generated JS is. I'd also add a for(var user in this.users). — RainingChain
– RainingChain, Commented Apr 1, 2016 at 16:54
Good question RainingChain! I don't know how to distingue it! The error is showing on the browser console so I guess it's from the browser right? Btw adding var solved my problem! — Gustavo Bissolli
– Gustavo Bissolli, Commented Apr 1, 2016 at 17:11

Gustavo Bissolli · Accepted Answer · 2016-04-01 17:14:47Z

1

Guys it is simpler them I thought! As @RainingChain helped me on the comment above I jus need to add var to the for loop.

How I was doing

for (user in this.users) {
    this.userIds.push(this.users[user].id);
}

The right way to do

for (var user in this.users) {
    this.userIds.push(this.users[user].id);
}

Thanks!

answered Apr 1, 2016 at 17:14

Gustavo Bissolli

1,5713 gold badges23 silver badges36 bronze badges

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

Comments

Руслан Лобода · Accepted Answer · 2017-01-18 16:26:58Z

0

Strangely. Your fix in your fiddle does not work for me. But works my fix in your html:

Your code:

<td><input type="checkbox" v-model="userIds" value="{{ user.id }}"></td>

My code:

<td><input type="checkbox" v-model="userIds" :value="user.id"></td>

Even without var in loop.

answered Jan 18, 2017 at 16:26

11 bronze badge