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

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

图片转代码服务由CSDN问答提供 功能建议

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

我将从目标网页重定向到此页面 列出了一些get变量的属性。 在我的情况下,我在此请求中有3个获取变量。 $ location,$ type和$ price。 如果我想要$ location变量中的任何位置,则应选中与$ location具有相同值的复选框。 例如,在我的情况下:如果我的$ location == candolim那么应该自动检查candolim复选框。

然后使用它我会向服务器发送一个AJAX请求以获取属性。 Now 我在这里使用Laravel和Vue Js。 Axios请求。

所以最初我从登陆页面搜索过滤器重定向到这里; 在请求中有变量名为$ locaton,$ type和$ price。 我正在使用Vue js。 无论何时加载页面并创建Vue实例,我都会获取数据库中可用的所有位置,并在此处显示复选框。 这里是我如何显示:

 &lt; p&gt;按位置搜索&lt; / p&gt; 
&lt; span v-for =“allLocations中的项目”&gt; 
&lt; input type =“checkbox”&gt;  &lt; span class =“checkbox-label”&gt;  @ {{item.location}}&lt; / span&gt;  &lt; br&gt; 
&lt; / span&gt; 
&lt; hr&gt; 
   
 
 

所以现在我的问题是如何获取使用的每个复选框的值 Vue? 如何查看一个复选框,其价值与$ location相同,我使用get请求从登录页面获取?

我知道这个问题非常令人困惑但是这个 我是如何解释我想要的。 请帮忙。 谢谢。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

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>
    
    点赞 评论

相关推荐 更多相似问题