VueJS 表单输入绑定答案

【问题标题】：VueJS Form Input BindingVueJS 表单输入绑定
【发布时间】：2018-04-01 06:44:14
【问题描述】：

嘿，我是 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>

【问题讨论】：

所有复选框都有相同的型号v-model="permissionsSelected" 这就是为什么它们都一起改变
是的，文档中也是这样写的：vuejs.org/v2/guide/forms.html
permissionsSelected 应该是一个数组，如文档中所述。
在你的情况下它是一个字符串，所以把它改成permissionsSelected: []
另外，您在<input > 上缺少value="" 属性

标签： javascript php laravel vue.js

【解决方案1】：

您的问题似乎是<input> 缺少:value=".."。权限选择也应该是一个数组：permissionsSelected: []

我建议你不要将 laravel Blade @foreach 与 vue 混合使用。

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

还有一件事，来自 laravel 文档

由于许多 JavaScript 框架也使用“花括号”来表示给定的表达式应该显示在浏览器中，您可以使用@ 符号通知 Blade 渲染引擎一个表达式应该保持不变

这是您更新的示例

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

【讨论】：