laravel 在 For in 循环中渲染复选框并在 Vue JS 中绑定它们的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/50050187/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Render checkboxes in For in loop and bind their Values in Vue JS
提问by Rakesh Kohali
I am trying to create some filters to filter data from the database using a combination of the more than one checkbox. Something like this.
我正在尝试使用多个复选框的组合创建一些过滤器来过滤数据库中的数据。像这样的东西。
I am getting redirected from a landing page to this page where properties are listed with some get variables. in my case, I have 3 get variables in this request. $location, $type and $price. Now I want whatever location is in $location variable the checkbox should be checked which has the same value as $location. In my case for instance: if my $location == candolim then candolim checkbox should be checked automatically.
我正在从登录页面重定向到此页面，其中列出了一些获取变量的属性。就我而言，此请求中有 3 个 get 变量。$location、$type 和 $price。现在我想要 $location 变量中的任何位置，应该选中与 $location 具有相同值的复选框。例如，在我的情况下：如果我的 $location == candolim 然后应该自动检查 candolim 复选框。
Then using that I will send an AJAX request to the server to fetch properties. Now here I am using Laravel and Vue Js. Axios for requests.
然后使用它我将向服务器发送 AJAX 请求以获取属性。现在我在这里使用 Laravel 和 Vue Js。用于请求的 Axios。
So initially when I got redirected here from landing page search filter; in the request has variables called $locaton, $type and $price. Here I am using Vue js. whenever the page is loaded and Vue Instance is created I am fetching all the locations available in the database and displaying them here with checkboxes. so here is how I am displaying that:
所以最初当我从登陆页面搜索过滤器重定向到这里时；在请求中有名为 $locaton、$type 和 $price 的变量。这里我使用的是 Vue js。每当加载页面并创建 Vue 实例时，我都会获取数据库中的所有可用位置，并在此处使用复选框显示它们。所以这是我的显示方式：
<p>SEARCH BY LOCATION</p>
<span v-for="item in allLocations">
<input type="checkbox"> <span class="checkbox-label"> @{{item.location}} </span> <br>
</span>
<hr>
So now my question is How can I get the value of every checkbox which is clicked using Vue? And how can I check a checkbox which has value same as $location which I am getting from the landing page using get request?
所以现在我的问题是如何获取使用 Vue 单击的每个复选框的值？以及如何检查值与使用 get 请求从登录页面获取的 $location 相同的复选框？
I know guys this question is very confusing but this is how i can explain what i want. Please help. Thank you.
我知道伙计们这个问题非常令人困惑，但这就是我如何解释我想要的。请帮忙。谢谢你。
回答by Marco Pantaleoni
Simply keep all the values to be selected in an array field in data, e.g. selectedLocations, then for each checkbox set the valueproperty to the corresponding value that has to make the checkbox selected and use the same selectedLocationsas the v-modelfor each checkbox.
只需在数组字段中保留所有要选择的值data，例如selectedLocations，然后为每个复选框将value属性设置为必须使复选框被选中的相应值，并使用与每个复选框相同selectedLocations的v-model值。
It is explained in the Form Input Bindings - Checkboxsection of the guide.
它在指南的表单输入绑定 - 复选框部分进行了解释。
Demo
演示
new Vue({
el: '#app',
data: {
allLocations: [
{ location: 'candolim' },
{ location: 'baga' },
],
selectedLocations: [ 'candolim' ] // you can set this from your $location (but make sure selectedLocations is an array)
}
})<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id='app'>
<p>SEARCH BY LOCATION</p>
<span v-for="item in allLocations">
<input type="checkbox" :value="item.location" v-model="selectedLocations"> <span class="checkbox-label"> {{item.location}} </span> <br>
</span>
<hr>
<span>Selected locations: {{ selectedLocations }}</span>
</div>