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?

Answer 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!

Answer 2

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.