Как связать (v-модель) данные, когда список с переключателями в каждом списке в Vue JS - PullRequest
Новая
       30

Как связать (v-модель) данные, когда список с переключателями в каждом списке в Vue JS

1 голос
/ 15 марта 2019

Я получаю данные из API. Мои данные выглядят как - 

    [
     {
    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
                   }
                 ]
    }
  ]

Как видите, это массив объектов. и в каждом объекте есть вложенный массив объектов. В основном я пытаюсь получить все группы для текущего пользователя с его участниками.

Теперь я показываю их в браузере, используя v-for вот так - 

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

Теперь мой вопрос: как я могу связать эти данные, используя v-модель, чтобы получить объект / массив с

идентификатор группы и назначенный пользователь (радио проверено).

Это мое лучшее, как я мог объяснить))

Спасибо.

Ответы [ 2 ]

1 голос
/ 15 марта 2019

Прежде всего, ваша модель не имеет поля для назначенного участника. Итак, вам нужно добавить что-то вроде этого: 

   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'
                   }
                 ]

Тогда вам необходимо предоставить привязку: 

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

Не забудьте добавить атрибут «имя» в радио.

Рабочий пример здесь https://jsfiddle.net/7x46mtr1/

0 голосов
/ 15 марта 2019

Попробуйте использовать свойство на участника . Как то так 

v-model=“participant.status”
...