What is the best way to implement modal windows in VUE?

Question

Vue.js

There is a large list of modal windows with different content (not template ones).
How best to implement their call.

<button @click="showModal('reg')"></button>

modal-item(target="reg")
modal-item(target="auth")
....

I can’t figure out how to toggle the visibility of windows, attaching a visibility value to each window in data looks strange.

Answer 1

Make self-sufficient components that will open the necessary windows, containing the state of the window, like this:

spoiler

<template>

  <div>
    <q-btn
      v-bind="$attrs"
      @click="show = true"
    ></q-btn>

    <q-dialog v-model="show">
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum repellendus sit voluptate voluptas eveniet porro. Rerum blanditiis perferendis totam, ea at omnis vel numquam exercitationem aut, natus minima, porro labore.
          </p>
          <q-btn
            label="OK"
            @click="show = false"
          />
    </q-dialog>
  </div>
</template>

<script>

export default {
  inheritAttrs: false,
  data () {
    return {
      show: false
    }
  }
}

</script>

Naturally, instead of q-dialog in this case, there can be any ready-made component. And the showModal('reg') approach leads to noodles in the code
. In the case of v-for, it's best to embed the component on each line, rather than forwarding the current line to the "common" list of components.