VueJS表单输入绑定
VueJS表单输入绑定
提问于 2017-10-20 06:11:31
嘿，所以我是初学者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>回答 1
Stack Overflow用户
回答已采纳
发布于 2017-10-20 07:44:10
您的问题似乎是<input>缺少了:value=".."。另外，permissionsSelected应该是一个数组：permissionsSelected: []
我建议你不要把@foreach和vue混合在一起。
相反，将$permissions传递给javascript并使用vue呈现列表。您可以看看如何在this answer中做到这一点。
还有一件事，来自拉里威尔的文件
由于许多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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46843264
复制相关文章
相似问题
腾讯云开发者
