在For in循环中渲染复选框并在Vue JS中绑定其值

Question

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

我从登录页面重定向到此页面，其中列出了带有一些get变量的属性。就我而言，此请求中有3个get变量。$ 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值。

本指南的“ 表单输入绑定-复选框”部分对此进行了说明。

演示版

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>