Hey so I'm currently a newbie in Vue so have some mercy :)

I am trying to implement a filter bar, where I want to render the checked-box onto a collection view. So a use case would be, if T-shirts was checked then that should render all T-shirts from a DB.

So currently I'm grabbing all the values of beers from my database and rendering that into my filter box:

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

Where my Vue instance is defined as so:

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

My only question here is how would I reactively grab the values of the boxes that are checked?

Thanks for the help

Hey so I'm currently a newbie in Vue so have some mercy :)

I am trying to implement a filter bar, where I want to render the checked-box onto a collection view. So a use case would be, if T-shirts was checked then that should render all T-shirts from a DB.

So currently I'm grabbing all the values of beers from my database and rendering that into my filter box:

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

Where my Vue instance is defined as so:

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

My only question here is how would I reactively grab the values of the boxes that are checked?

Thanks for the help

• javascript
• vue.js

2 Answers 2

Just use 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://v2.vuejs/v2/guide/forms.html#Checkbox

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

The value of input is required, and you must make sure each value is different with others.