Vue-bootstrap вложенные флажки

Question

Я хочу иметь боковую панель, которая представляла бы фильтр, и там у меня были бы флажки, которые представляли бы то, что должно быть показано пользователю.Я нашел это: https://bootstrap -vue.js.org / docs / components / form-checkbox / # indeterminate-tri-state-support

Но это только один уровень иМне нужно будет пройти два уровня.Пример того, чего я пытаюсь достичь:

Select All
    -Breakfest
        -Eggs
        -Bacon
        -Sandwich
    -Lunch
        -Salad
        -Chicken
        -Fish
    -Dinner
        -Pancakes
        -Tacos
        -Beef

Теперь я хочу что-то вроде примера в документации по ссылке, но это еще на один уровень глубже.

Answer 1

По сути, я создал три партии группировок с тремя состояниями (три варианта по три варианта в каждой), а затем создал еще один флажок с тремя состояниями вверху, который изменяет свое состояние в зависимости от количества вариантов, выбранных в каждом изтри группировки.

Answer 2

Должно быть легко принять это к Bootstrap Vue, так как Bootstrap Vue только абстрагирует HTML.Я только что добавил первый фильтр, вы должны понять.

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

Вы можете использовать цикл в 'filters.breakfast.breakfast' ().Я бы использовал Lodash для этого, потому что свойства не должны быть известны.

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;
}

Предварительный просмотр : http://jsfiddle.net/xv3y04j2/