What is the best way to conceal a div within every occurrence of a component when I activate my current target?

Question

What is the best way to conceal a div within every occurrence of a component when I activate my current target?

One of the challenges I'm facing involves displaying a div when a child component is clicked. This component is rendered multiple times on the page without any kind of loop. The tricky part is that when I show the div in one specific instance of the component, I want to hide it in all the other instances. I attempted to use a reference to close all instances through DOM manipulation, but unfortunately, that approach did not yield the desired outcome.

 <template>
  <span>
    <div class="options--small" @click="toggleOptions" />
    <div v-show="showOptions" ref="test" class="options-menu">
      <slot />
    </div>
  </span>
</template>
<script>
export default {
  name: 'ShowOptions',
  data () {
    return {
      showOptions: false
    }
  },
  methods: {
    toggleOptions () {
      this.$refs.test.style.display = 'none'
      this.showOptions = !this.showOptions
    }
  }
}
</script>

javascript vue.js vue-component

Answer 1

Answer №1

Avoid using ref or direct DOM access, as it should always be a last resort.

The visibility of each options menu is controlled by the showOptions property of the respective component. To communicate to every component instance to hide their menu, consider using an event bus. Implementing an event bus is recommended for Vue projects to enable decoupled inter-component communication.

If you are using Vue 2, a Vue instance can serve as an event bus.

Here is an untested example:

// event-bus.js

const v = new Vue()

export function on(event, fn) {
  v.$on(event, fn)
}

export function off(event, fn) {
  v.$off(event, fn)
}

export function emit(event, ...args) {
  v.$emit(event, ...args)
}

import * as bus from './event-bus.js'

export default {
  data() {
    return {
      showOptions: false
    }
  },
  created() {
    bus.on('ShowOptions.hide', this.onShowOptionsHide)
  },
  destroyed() {
    // Important otherwise leaks memory
    bus.off('ShowOptions.hide', this.onShowOptionsHide)
  },
  methods: {
    onShowOptionsHide() {
      this.showOptions = false
    },
    toggleOptions() {
      if (this.showOptions) {
        this.showOptions = false
      } else {
        bus.emit('ShowOptions.hide')
        this.showOptions = true
      }
    }
  }
}

If you prefer not to use an event bus, you can track every component instance to hide their menus.

Here is an untested example:

const instances = new Set()

export default {
  data () {
    return {
      showOptions: false
    }
  },
  created() {
    instances.add(this)
  },
  destroyed() {
    instances.delete(this)
  },
  methods: {
    hideOtherMenus() {
      for (const i of instances) {
        if (i !== this) {
          i.showOptions = false
        }
      }
    },
    toggleOptions() {
      this.hideOtherMenus()
      this.showOptions = !this.showOptions
    }
  }
}

Answer 2

Avoid using ref or direct DOM access, as it should always be a last resort.

The visibility of each options menu is controlled by the showOptions property of the respective component. To communicate to every component instance to hide their menu, consider using an event bus. Implementing an event bus is recommended for Vue projects to enable decoupled inter-component communication.

If you are using Vue 2, a Vue instance can serve as an event bus.

Here is an untested example:

// event-bus.js

const v = new Vue()

export function on(event, fn) {
  v.$on(event, fn)
}

export function off(event, fn) {
  v.$off(event, fn)
}

export function emit(event, ...args) {
  v.$emit(event, ...args)
}

import * as bus from './event-bus.js'

export default {
  data() {
    return {
      showOptions: false
    }
  },
  created() {
    bus.on('ShowOptions.hide', this.onShowOptionsHide)
  },
  destroyed() {
    // Important otherwise leaks memory
    bus.off('ShowOptions.hide', this.onShowOptionsHide)
  },
  methods: {
    onShowOptionsHide() {
      this.showOptions = false
    },
    toggleOptions() {
      if (this.showOptions) {
        this.showOptions = false
      } else {
        bus.emit('ShowOptions.hide')
        this.showOptions = true
      }
    }
  }
}

If you prefer not to use an event bus, you can track every component instance to hide their menus.

Here is an untested example:

const instances = new Set()

export default {
  data () {
    return {
      showOptions: false
    }
  },
  created() {
    instances.add(this)
  },
  destroyed() {
    instances.delete(this)
  },
  methods: {
    hideOtherMenus() {
      for (const i of instances) {
        if (i !== this) {
          i.showOptions = false
        }
      }
    },
    toggleOptions() {
      this.hideOtherMenus()
      this.showOptions = !this.showOptions
    }
  }
}

What is the best way to conceal a div within every occurrence of a component when I activate my current target?

Answer №1

Similar questions

Error encountered in thread "main": Issue with parsing string literal

What's the best way to add a Grid to a TabPanel in React without triggering any pesky warnings?

In search of a fresh and modern Facebook node template

Fill up mongoose with data on 3 schemas

Unable to invoke a function in JavaScript

Using Vue.js to update a variable in a parent component that is nested multiple layers deep

After the rendering of the HTML, the value of the jQuery input does not change

What are the steps to configure the datepicker with webdriverIO?

Share the Angular library distribution folder on a new git repository

Ionic timer binding issue: troubleshooting tips

Remove the class upon clicking

The window resizing function continues on an endless loop

Instructions on utilizing slideDown() paired with appendTo()

How to effectively share an object array between controllers when utilizing modal windows in AngularJS

AngularJS ng-view is a directive that views the application

Personalize your material-ui popover

Issue with Javascript Promise causing failure to populate list with objects

In my experience, I have encountered issues with certain routes not functioning properly within Express

Unable to append item to JavaScript Map

Verify if there are duplicate values present in a table