Отображать флажки в цикле For и связывать их значения в Vue JS

Question

Я пытаюсь создать несколько фильтров для фильтрации данных из базы данных, используя комбинацию из нескольких флажков. Как то так.

Я перенаправлен с целевой страницы на эту страницу, где перечислены свойства с некоторыми переменными get. в моем случае у меня есть 3 переменные get в этом запросе. $ местоположение, $ тип и $ цена. Теперь я хочу, чтобы в переменной $ location было указано местоположение, отметьте этот флажок, значение которого совпадает с значением $ location. Например, в моем случае: если мой $ location == candolim, то флажок candolim должен быть установлен автоматически.

Затем, используя это, я отправлю запрос AJAX на сервер для получения свойств. Теперь здесь я использую Laravel и Vue Js. Аксиосы ​​для запросов.

Итак, изначально, когда меня перенаправили сюда из фильтра поиска целевой страницы; в запросе есть переменные с именами $ locaton, $ type и $ price. Здесь я использую Vue JS. всякий раз, когда страница загружается и создается Vue Instance, я выбираю все местоположения, доступные в базе данных, и показываю их здесь с флажками. вот как я это отображаю:

   <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? И как я могу установить флажок, который имеет значение, аналогичное $ location, которое я получаю с целевой страницы с помощью запроса get?

Я знаю, ребята, этот вопрос очень запутанный, но именно так я могу объяснить, чего я хочу. Пожалуйста помоги. Спасибо.

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>