在For循环中渲染复选框并在Vue JS中绑定它们的值

Question

我正在尝试使用多个复选框的组合创建一些过滤器来过滤数据库中的数据。这样的事情。

我正在从着陆页重定向到此页面，其中列出了包含一些get变量的属性。在我的情况下，我在此请求中有3个获取变量。 $ location，$ type和$ price。 现在我想要$ location变量中的任何位置，应该选中与$ location具有相同值的复选框。 以我的情况为例：如果我的$ location == candolim则应自动检查candolim复选框。

然后使用它我将向服务器发送一个AJAX请求以获取属性。 现在我在这里使用Laravel和Vue Js。 Axios请求。

所以最初我从登陆页面搜索过滤器重定向到这里;在请求中有变量名为$ 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>

所以现在我的问题是如何获得使用Vue点击的每个复选框的值？ 我如何使用get请求检查一个与我在登录页面上获得的$ location相同的复选框？

我知道伙计这个问题很混乱，但这就是我能解释我想要的东西。 请帮忙。 谢谢。

Answer 1

只需在data的数组字段中保留要选择的所有值，例如selectedLocations，然后对于每个复选框，将value属性设置为必须选中复选框的相应值，并为每个复选框使用与selectedLocations相同的v-model。< / p>

本指南的Form Input Bindings - Checkbox部分对此进行了解释。

演示

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>