Multi toggle для VUE?

Question

[Александр]

Здравствуйте, решил сделать multi toggle с использованием vuejs.
Написал вот такой код:

export default {
  data () {
    return {
      hiddenToggles: []
    }
  },
  methods: {
    toggle (el) {
      let hiddenToggle = this.hiddenToggles.find(el)

      if (hiddenToggle) {
        this.hiddenToggles = this.hiddenToggles.filter((x) => x !== el)
      } else {
        this.hiddenToggles = this.hiddenToggles.concat(el)
      }
    },
    isHidden (el) {
      return this.hiddenToggles.findIndex(el) > -1
    }
  }
}

Применяю вот так:

<button v-on:click="toggle(1)">Click</button>

<div class="nav-drop" :class="{ 'is-active': isHidden(1) }">
	<!-- Content -->
</div>

Но когда я запускаю проект то компонент не появляется.
Буду очень рад любому решению проблемы =)

Answer 1

[bubaley]

Здравствуйте, вот рабочий пример:

<label for="fname">Your toggle:</label><br>
<input v-model.number="input" type="text" id="fname" style="border: 1px solid black">
<button @click="toggle(input)">Change toggle view</button>
<div class="nav-drop" v-for="(el, index) in listToShow" :key="index">
    {{el}}
</div>

export default {
        name: "Test",
        data: () => ({
            toggles: [
                1,
                2,
                3,
                4,
                5
            ],
            hiddenToggles: [],
            input: '',
        }),
        methods: {
            toggle(value) {
                if (!value)
                    return
                let index = this.hiddenToggles.findIndex(el => value === el)
                if (index > -1)
                    this.hiddenToggles.splice(index, 1)
                else
                    this.hiddenToggles.push(value)

            },
        },
        computed: {
            listToShow() {
                return this.toggles.filter(value =>
                    this.hiddenToggles.findIndex(el => el === value) === -1)
            }
        }
    }

Суть есть 5 toggles от 1 до 5. Они рисуются в цикле.
В input пишите номер, какой toggle нужно скрыть или отобразить.
Сами toggles, которые должны быть показаны считаются в computed.

Comments

[Александр]

Мне нужно это для того чтобы сразу использовать несколько модальных окон в одном компоненте. Спасибо за помощь но это не то

[bubaley]

Тогда вы можете чуть поменять код, и вместо hiddenToggles использовать showToggles. И если идентификатор модального окна находится в массиве, тогда отображать его
И вместо computed на модалки повесить v-show="проверка нахождения в массив showToggles"

[Александр]

bubaley, спасибо большое, очень помогли.