Question

嘿所以我现在是Vue的新手，所以请有一些怜悯:)

我正在尝试实现一个过滤条，我想将复选框渲染到集合视图中。所以一个用例就是，如果T恤被检查，那么应该从DB渲染所有的T恤。

所以目前我从我的数据库中获取啤酒的所有值并将其渲染到我的过滤器框中：

  <div class="overflow menu-list">
    <ul>
      <li v-for="brewery in breweryName">
        <input type="checkbox" name="beer">{{brewery}}
      </li>
    </ul>
  </div>

我的Vue实例定义如下：

var filterVM = new Vue({
  el: '#filter-bar',
  data : {
    breweryName : grabFromBeerDB("brewery"),
    beerStyle : grabFromBeerDB("style"),
    checkedBrewery : []
  },
  firebase : {
    beerList: beerDatabaseRef
  }, ...

我唯一的问题是如何反应性地获取被检查框的值？

感谢您的帮助

Answer 1

只需使用v-model

即可

<input type="checkbox" name="beer" value="A" v-model="checkedBrewery">
<input type="checkbox" name="beer" value="B" v-model="checkedBrewery">
<input type="checkbox" name="beer" value="C" v-model="checkedBrewery">

docs：https://vuejs.org/v2/guide/forms.html#Checkbox

Answer 2

    <li v-for="brewery in breweryName">
        <input type="checkbox" name="beer" :value="brewery" v-model="checkedBrewery">
       {{brewery}}
    </li>

输入的值是必需的，您必须确保每个value与其他A, B and C不同。

在Vue中抓取复选框的值

2 个答案: