[Vuejs]-Vue-bootstrap nested checkboxes

by

0👍

✅

Basically, I created three batches of tri-state groupings (tri-state +3 choices each), and then created another tri-state checkbox at the top that changes it’s state based on the number of choices selected in each of the three groupings.

👤Miko

0👍

It should be simple to adopt this to Bootstrap Vue since Bootstrap Vue only abstracts HTML. I just added the first filter, you should get the idea.

HTML

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <input type="checkbox" v-model="all">Select all<br>
  <input type="checkbox" v-model="filters.breakfast.breakfast" class="indent">Breakfast<br>
  <input type="checkbox" v-model="filters.breakfast.eggs" class="double-indent">Eggs<br>

  <hr>

  All: {{ all }}<br>
  Breakfast: {{ filters.breakfast.breakfast }}<br>
  Eggs: {{ filters.breakfast.eggs }}<br>
</div>

JavaScript

You may use a loop at 'filters.breakfast.breakfast' (). I’d use Lodash for this because the properties mustn’t be known.

new Vue({
  el: '#app',
  data: () =>  ({
    all: false,
    filters: {
        breakfast: {
          breakfast: false,
          eggs: false
      }
    }
  }),

  watch: {
    all () {
      this.filters.breakfast.breakfast = !this.filters.breakfast.breakfast
    },

    'filters.breakfast.breakfast' () {
        this.filters.breakfast.eggs = !this.filters.breakfast.eggs
    }
  }
})

CSS

.indent {
  margin-left: 1em;
}

.double-indent {
  margin-left: 2em;
}

Preview: http://jsfiddle.net/xv3y04j2/

👤Julian

Leave a comment