Multi toggle for VUE?

Question

Vue.js

Hello, I decided to make multi toggle using vuejs.
Wrote this code:

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

I apply like this:

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

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

But when I run the project, the component does not appear.
I will be very happy with any solution to the problem =)

Answer 1

Hello, here is a working example:

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

The essence is 5 toggles from 1 to 5. They are drawn in a cycle.
In input, write the number of which toggle you want to hide or show.
The toggles themselves to be shown are computed.