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

Question

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

我正在从登录页面重定向到此页面，其中列出了一些获取变量的属性。就我而言，我在这个请求中有 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 属性设置为必须使复选框被选中的相应值，并为每个复选框使用与v-model 相同的selectedLocations。

指南的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>