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-model绑定此数据以获取对象/数组

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

Vue JS中每个列表中带有单选按钮的列表时如何绑定（v-model）数据

2 个答案: