Logo

Conditional Event Listener in VueJS

Wie bindet man in VueJS einen Event Listener nur wenn Bedingung X erfüllt ist? Und wie kann ich dem Listener Argumente mitgeben?

16. Februar 2020

Klar, einen EventListener in VueJS binden ist ein Kinderspiel (in Vanilla JS übrigens auch 😬). Aber ich wollte letztens einen EventListener nur dann binden, wenn wir uns auf einem Gerät mit einer Maximalbreite von 768px befinden.

Kommen wir zum Wie:

<body>
  <div id="app">
    <h1>{{greeting}}</h1>
    <h2>Die Bedingung ist: {{condition}}</h2>

    <button
      @click="condition = !condition; magicText = null; eventText = null;"
    >
      Bedingung auf {{ condition ? 'false' : 'true' }} setzen
    </button>

    <div style="margin: 25px 0;">
      <button
        v-on="{ click: condition ? $event => showMagicText('Leonard Cohen - Tower of Song', $event) : null }"
      >
        Wenn die Bedingung true ist, habe ich einen Event Listener
      </button>
    </div>

    <div>
      <p>{{magicText}}</p>
      <p>{{eventText}}</p>
    </div>

    <div style="margin-top: 50px">
      <a href="/blog/conditional-event-listener-in-vuejs">zurück zum Beitrag</a>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        greeting:
          "Wie man in VueJS einen Event Listener bindet, sofern eine Bedingung erfüllt ist.",
        condition: false,
        magicText: null,
        eventText: null,
      },
      methods: {
        showMagicText(text, e) {
          this.eventText = `Zugriff auf das Event Objekt haben wir auch. Du hast auf die Positionen x: ${e.x} und y: ${e.y} geklickt!`;
          this.magicText = text;
        },
      },
    });
  </script>
</body>

Wir binden ein Click Event sofern die condition erfüllt ist: v-on="{ click: condition ? $event => showMagicText('Leonard Cohen - Tower of Song', $event) : null }". Klickt ein User auf den Button, checken wir erst ab, ob condition = true ist, falls ja, binden wir die Methode showMagicText. Dieser können wir auch Argumente geben, inkl. des Event Objektes.

Viel Spaß!

« Alle Beiträge