<!-- Single -->
<div class="fs-component">
  <h1>Button Filter</h1>
  <p>Single Select - Selects one at a time</p>
  <div class="filter-button" v-for="item in filters.bedrooms">
    <a
      fs-action="filter"
      fs-type="term"
      fs-fields="bedrooms"
      v-bind:class="{'active': filter7.includes(item.key)}"
      v-on:click="buttonFilter('filter7', false, item.key, $event)"
    >{{item.key}} Bedrooms</a>
  </div>
</div>

<!-- Multi with single reference -->
<div class="ss-component">
  <h1>Button Filter</h1>
  <p>Multi Select - Selects multiple items at a time</p>
  <div class="filter-button" v-for="item in filters.bedrooms">
    <a
      fs-action="orFilter"
      fs-type="term"
      fs-fields="bedrooms"
      v-bind:class="{'active': filter7.includes(item.key)}"
      v-on:click="buttonFilter('filter7', true, item.key, $event)"
    >{{item.key}} Bedrooms</a>
  </div>
</div>

<!-- Multi with multi reference -->
<div class="ss-component">
  <h1>Button Filter</h1>
  <p>Multi Select - Selects multiple items at a time</p>
  <div class="filter-button" v-for="item in filters.bedrooms">
    <a
      ss-action="andFilter"
      ss-type="term"
      ss-fields="bedrooms"
      v-bind:class="{'active': filter7.includes(item.key)}"
      v-on:click="buttonFilter('filter7', true, item.key, $event)"
    >{{item.key}} Bedrooms</a>
  </div>
</div>