Dynamic checkbox
-
Hi everybody!
I have a dynamic list of users, which I get using the directive v-for. This list includes the checkboxes. If I pointed out one - all checkboxes are selected.
My questions is: how can i deselect only one checkbox, bounded to userId for example?
Thank you! -
Hi @igor_local with your code, it’s more easier
globaly, if all your checkbox are the same data, you cant have the behavior you expect.
if your v-for point on an array of object, your checkbox must to point on a data of your object
for exemple:
in your data
posts: [
{ id: 1, title: ‘my first title’, check: false},
{ id: 2, title: ‘my second title’, check: false},
…
]in your template:
<div v-for="(post, i) in posts">
{{ post.title }}
<q-checkbox v-model=“post.check” /> -
@Shoooryuken
Thank you for your answer!
I think my case is a little more complicated. I get data from server that is storing into empty array. It looks like this:
The data from server:
{
[user: ‘John Lennon’, userId: ‘53d879b2-c44c-11e7-9456-002590c134db’],
[user: ‘Paul McCartney’, userId: ‘c8faace9-b24e-47af-8f64-1ea9e30ae8c0’],
[user: ‘Ringo Starr’, userId: ‘70d9fec0-8c8b-446c-bd6b-8460aa5c1679’],
[user: ‘George Harrison’, userId: ‘d00d9bad-7f74-4e66-8ddc-071bf37da0f0’]
}this.objects = data
in my data
objects: []in my template:
<div v-for="(item, i) in objects">
{{ item.user }}
</div>So, how do i insert this v-model into an empty array?
<q-checkbox v-model=“post.userId” />thank you!!
-
@igor_local pls make a working reproduction codepen, also use unique keys if you are using v-for. ie
:key="item.userId"
. -
@metalsadman , sorry, i was very busy these days.
So, i tried to outline the problem that I’m solving:
https://codesandbox.io/s/recursing-cdn-dqnp7
i want to uncheck one of the items (one, or two, any) and so that this item is not copied into another array when copying (by clicking the button ‘Copy to Another Array’).Thank you! Hope i explained clearly…