douwengzao5790 2018-04-26 18:58
浏览 1678
已采纳

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

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:

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

  • 写回答

1条回答 默认 最新

  • doumu6941 2018-04-26 19:16
    关注

    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>

    </div>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 代码的修改,添加和运行完善
  • ¥15 krpano-场景分组和自定义地图分组
  • ¥15 lammps Gpu加速出错
  • ¥15 关于PLUS模型中kapaa值的问题
  • ¥15 关于博途V17进行仿真时无法建立连接问题
  • ¥15 机器学习教材中的例题询问
  • ¥15 求.net core 几款免费的pdf编辑器
  • ¥15 为什么安装HCL 和virtualbox之后没有找到VirtualBoxHost-OnlyNetWork?
  • ¥15 C# P/Invoke的效率问题
  • ¥20 thinkphp适配人大金仓问题