How to bind(v-model) data when a list with radio buttons in each list in Vue JS

Question

I am fetching data from API. My data looks like -

    [
     {
    id:1,
    name:nameOfTheGroup1,
    participants:[
                   {   
                    id:1,
                    name:participant1
                   },
                   {   
                    id:2,
                    name:participant2
                   }
                 ]
     },
     {
    id:2,
    name:nameOfTheGroup2,
    participants:[
                   {   
                    id:3,
                    name:participant1
                   },
                   {   
                    id:4,
                    name:participant2
                   }
                 ]
    }
  ]

As you can see its an array of objects. and in each object has nested array of objects. Basically i am trying to fetch all the groups for current user with its participants.

Now i am showing those in the browser using v-for like this -

  <h3>Please assign an admin to given groups</h3>

  <div v-for="group in groups">
    {{ group.name }}

    <div v-for="participant in group.participants">
      <input type="radio" value="" v-model=""/>
      <label>{{ participant.name }} </label>
   </div>

   </div>

Now, my question is how can i bind this data using v-model to get object/array with

group id and assigned user (radio checked ).

This is my best how i could explain))

Thanks.

have you tried putting "participant" in v-model and "id" in value? — Vallo
– Vallo, Commented Mar 15, 2019 at 18:23
@Vallo by doing that it gives this error: You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable. Consider using an array of objects and use v-model on an object property instead — Rakesh K
– Rakesh K, Commented Mar 15, 2019 at 18:27

Skipper · Accepted Answer · 2019-03-15 20:24:52Z

First of all, your model doesn't have any field for the assigned participant. So, you need to add something like that:

   id:1,
    name:'nameOfTheGroup1',
    assignedId: '',
    participants:[
                   {   
                    id:1,
                    name:'participant1'
                   },
                   {   
                    id:2,
                    name:'participant2'
                   }
                 ]
     },
     {
    id:2,
    name:'nameOfTheGroup2',
    assignedId: 3,
    participants:[
                   {   
                    id:3,
                    name:'participant1'
                   },
                   {   
                    id:4,
                    name:'participant2'
                   }
                 ]

Then you need to provide binding:

    <div v-for="participant in group.participants">
      <input type="radio" v-model="group.assignedId" :value="participant.id" :name="group.id"/>
      <label>{{ participant.name }} </label>
   </div>

Do not forget to add "name" attribute to the radio.

Working example is here https://jsfiddle.net/7x46mtr1/

Radu Diță · Accepted Answer · 2019-03-15 18:39:21Z

0

Try to use a property on participant. Something like this

v-model=“participant.status”

answered Mar 15, 2019 at 18:39

Radu Diță

14.3k2 gold badges33 silver badges37 bronze badges

2 Comments

Martin Štefek Over a year ago

Actually this answer should work, it did work for me without any trouble when I replicated your problem.

Ayyash Over a year ago

whats "status"? is that a built in vue prop?

Collectives™ on Stack Overflow

How to bind(v-model) data when a list with radio buttons in each list in Vue JS

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related