当VUE JS中每个列表中的无线电按钮列表时，如何绑定(V模型)数据

Question

我正在从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模型绑定此数据以获取

的对象/数组

组ID和分配的用户（收音机检查）。

这是我最好的解释）

谢谢。

Answer 1

首先，您的模型对分配的参与者没有任何字段。因此，您需要添加类似的内容：

   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/

Answer 2

尝试在参与者上使用属性。像这样的东西

v-model=“participant.status”