无法将值分配给vue.js中的复选框

丹妮尔·桑德洛（Danyal Sandeelo）

我正在通过结果集创建复选框列表。我可以看到正确的值，但无法正确设置该值

 <ul>
    <li v-for="role in roles">
        <input type="checkbox" :value="role.id"  v-model="form.roleIds" > {{role.name}}
    </li>
</ul>

当我单击其中一个复选框时，我看到它们全部都被单击了。

这就是我在控制台中看到的内容：

阿罗拉

我认为您的数据属性roleIds未正确定义，应该像这样-

roleIds: []

测试视图

<template>
  <ul>
    <li v-for="(role, i) in roles" :key="i">
      <label>
        <input type="checkbox" :value="role.id"  v-model="form.roleIds" >
        {{role.name}}
      </label>
    </li>
  </ul>
</template>

<script>
  export default {
    data: () => ({
      form: {
        roleIds: [] // **this is the catch**
      },
      roles: [{
        id: 1,
        name: 'Siddharth'
      },
      {
        id: 2,
        name: 'Arora'
      }]
    })
  }
</script>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。