2018-04-26 18:58

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

  • laravel
  • php
  • vue.js
  • javascript

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.

enter image description here

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:

<span v-for="item in allLocations">
<input type="checkbox"> <span class="checkbox-label"> @{{item.location}} </span> <br>

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.

  • 点赞
  • 回答
  • 收藏
  • 复制链接分享