Javascript VueJS表单输入绑定

嘿，我是Vue的初学者，我只在使用foreach循环时遇到这个问题 问题：每当我选中任何复选框时，都会被选中

create.blade.php

  @foreach ($permissions as $permission)
              <li class="list-group-item bold">
                  <input type="checkbox" id="{{$permission->id}}"
                  :custom-value="{{$permission->id}}" v-model="permissionsSelected">
                  <label for="{{$permission->id}}">{{$permission->display_name}}
                  <em>{{$permission->description}}</em></label>
              </li>
            @endforeach
          </ul>
    <input type="hidden" name="permissions" :value="permissionsSelected">



<script>
 var app = new Vue({
   el: '#app',
   data: {
     permissionsSelected: ''
   }
 });
</script>

---

您的问题似乎是缺少的：value=。。。此外，permissionsSelected应该是一个数组：permissionsSelected:[]

我建议您不要将laravel blade@foreach与vue混合使用

而是将$permissions传递给javascript并使用vue呈现列表。你可以看看如何做到这一点

还有一件事，来自laravel文档

因为许多JavaScript框架也使用大括号来表示 给定的表达式应显示在浏览器中，您可以使用@ 用于通知刀片渲染引擎表达式应为的符号 不动

下面是您更新的示例

<div id="app">
  <ul>
    <li class="list-group-item bold" v-for="permission in permissions">
      <input
        type="checkbox"
        :id="permission.id"
        :value="permission.id"
        v-model="permissionsSelected"
      >
      <label :for="permission.id">@{{ permission.display_name }}
        <em>@{{ permission.description }}</em>
      </label>
    </li>
  </ul>
  <input type="hidden" name="permissions" :value="permissionsSelected">
</div>

<script>
  var permissions = JSON.parse("{{ json_encode($permissions) }}");

  var app = new Vue({
    el: '#app',
    data: {
      permissions: permissions,
      permissionsSelected: [],
    }
  });
</script>

---

所有复选框都具有相同的模型v-model=Permissions Selected这就是它们一起更改的原因是，文档中也是这样写的：Permissions Selected应该是一个数组，正如文档中所写的那样。在您的情况下，它是一个字符串，所以将其更改为Permissions Selected:[]此外，您缺少上的value=attribute