Render checkboxes in For in loop and bind their Values in Vue JS

Question

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.

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.

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:

   <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?

I know guys this question is very confusing but this is how i can explain what i want. Please help. Thank you.

tony19 · Accepted Answer · 2022-07-15 20:18:38Z

11

Simply keep all the values to be selected in an array field in data, e.g. selectedLocations, then for each checkbox set the value property to the corresponding value that has to make the checkbox selected and use the same selectedLocations as the v-model for each checkbox.

It is explained in the Form Input Bindings - Checkbox section 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>

edited Jul 15, 2022 at 20:18

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 26, 2018 at 19:16

Marco Pantaleoni

2,53916 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rakesh Kohali Over a year ago

Thank you, sir, for the answer. It's working but still, I didn't get an answer to my another question. if I am getting any one location in a PHP variable then I want to be checked that checkbox. for example. here if my $location == candolim then I need my checkbox to be checked. Thanks.

Marco Pantaleoni Over a year ago

Which is the other question? If you want the value of the checkboxes, it is kept in selectedLocations as an array. If you want to send it to php, you have to send it for example through a form or with FormData.

Rakesh Kohali Over a year ago

I understood. Thank you very much) It helped me so much.

Balaji Over a year ago

It doesn't work when I push new object into array,it return null?

Collectives™ on Stack Overflow

Render checkboxes in For in loop and bind their Values in Vue JS

1 Answer 1

Demo

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Demo

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related