Группировать checkbox-ы vue-js

Question

Всем привет. Я только знакомлюсь с возможностями javascript и VUE JS. Подскажите, как могу реализовать такой функционал: есть массив чекбоксов со значениями. При клике на определенный чекбокс, например, на чекбокс со значением item2, нужно сделать disabled всех значений кроме текущего item2, а также item4 и item5, то есть, эти три мы можем отмечать чекбоксами. Или, к примеру, если отмечен (первым элементом) item4, то делать disabled для всех значений, кроме текущего item4, а также item6, item1. Таких условий может быть несколько разных (до 3 случаев), но они все равно будут конкретными и неизменными. Как можно реализовать мою идею?

new Vue({
  el: '#app',
  data: {
    checkedItems: [],
    items: [{
        value: 'item1', id: 0
      },
      {
        value: 'item2', id: 1
      },
      {
        value: 'item3', id: 2
      },
      {
        value: 'item4', id: 3
      },
      {
        value: 'item5', id: 4
      },
      {
        value: 'item6', id: 5
      }
    ]
  }
})

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">
  <div class="flex items-center" v-for="item in items" :key="item.id">
    <input type="checkbox" class="mr-2"
            :value="item.value"
            v-model="checkedItems" />
    <span>{{ item.value }}</span>
  </div>
  <span>{{checkedItems}}</span>
</div>

Answer 1

При клике на чекбокс, по ключу child будет происходить проверка, на то какие элементы надо оставить включенными. И так же проверка на то, что элемент кликнут первым Например:

new Vue({
  el: '#app',
  data: {
    selectedItem: null,
    checkedItems: [],
    items: [{
        value: 'item1', id: 0, child: [2, 4],
      },
      {
        value: 'item2', id: 1, child: [5],
      },
      {
        value: 'item3', id: 2, child: [3],
      },
      {
        value: 'item4', id: 3, child: [1],
      },
      {
        value: 'item5', id: 4, child: [0, 3],
      },
      {
        value: 'item6', id: 5, child: [1, 3],
      }
    ]
  },
  methods: {
    selectItem(item) {
      if (this.checkedItems.length) {
        if (this.selectedItem) return;
        this.selectedItem = item
      }
      else {
        this.selectedItem = null;
      }
    }
  }
})

#app {
  height: 300px
}

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">
  <div class="flex items-center" v-for="item in items" :key="item.id">
    <input type="checkbox" class="mr-2"
            :value="item.value"
            v-model="checkedItems" 
            :disabled="selectedItem && !selectedItem.child.includes(item.id) && selectedItem.id !== item.id"
            @change="selectItem(item)"
    />
    <span>{{ item.value }}</span>
  </div>
  <span>{{selectedItem}}</span>
</div>

В результате кликая на нужный чекбокс, для дальнейшего выделения будут доступны лишь те которые подходят.

БЛОГ НА HUSL

Группировать checkbox-ы vue-js

Ответы (1 шт):