Is there a way to create a popover menu in VueJS without using JQuery

Question

Is there a way to create a popover menu in VueJS without using JQuery

I found exactly what I need in this helpful answer. It demonstrates a menu appearing when clicking on a table row. The dilemma is that it relies on JQuery...

Therefore, I am curious if achieving the same functionality without JQuery is possible. Maybe through VueJS, which happens to be the framework I am currently utilizing?

javascript vue.js ecmascript-6 vuejs2

Answer 1

Answer №1

Translated the given example

let rows = document.querySelectorAll("tr");
    let btnPane = document.getElementById("button-pane");
    document.active = '';
  
    if (window.NodeList && !NodeList.prototype.forEach) {
        NodeList.prototype.forEach = Array.prototype.forEach;
    }

    btnPane.addEventListener("mouseover", function() {
        btnPane.style.display = "block";
        if(document.active)
            document.active.style.backgroundColor = "lightblue";
    });
    btnPane.addEventListener("mouseleave", function() {
        btnPane.style.display = "none";
        if(document.active)
            document.active.style.backgroundColor = "";
    });

    rows.forEach(function(row) {
        row.addEventListener("click", function(e) {
            var posLeft = e.clientX + 10;
            var posBottom = this.offsetTop + this.offsetHeight+8;
            btnPane.style.top = posBottom + "px";
            btnPane.style.left = posLeft + "px";
            btnPane.style.display = "block";
            document.active = this;
        });
        row.addEventListener("mouseleave", function() {
            btnPane.style.display = "none";
        });
    });

    table {
        border-collapse: collapse;
    }

    th, td{
        border-bottom: 1px solid #aaa;
    }

    #mytable tbody tr:hover {
      background-color: lightblue;
    }

    .button-pane {
      display: none;
      position: absolute;
      float: left;
      top: 0px;
      left: 0px;
      background-color: lightblue;
      width: 150px;
      height: 30px;
      padding: 0px;
      text-align: center;
    }

    .button-pane button {
      display: inline;
      cursor: pointer;
    }

    <table id="mytable" border="1" width="100%">
      <thead>
        <tr>
          <td>HEADER 1</td>
          <td>HEADER 2</td>
          <td>HEADER 3</td>
          <td>HEADER 4</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Item 1</td>
          <td>a</td>
          <td>aa</td>
          <td>aaa</td>
        </tr>
        <tr>
          <td>Item 2</td>
          <td>b</td>
          <td>bb</td>
          <td>bbb</td>
        </tr>
        <tr>
          <td>Item 3</td>
          <td>c</td>
          <td>cc</td>
          <td>ccc</td>
        </tr>
      </tbody>
    </table>
<div id="button-pane" class="button-pane">
  <button id="button1">Button 1</button>
  <button id="button2">Button 2</button>
</div>
    </div>

Answer 2

Translated the given example

let rows = document.querySelectorAll("tr");
    let btnPane = document.getElementById("button-pane");
    document.active = '';
  
    if (window.NodeList && !NodeList.prototype.forEach) {
        NodeList.prototype.forEach = Array.prototype.forEach;
    }

    btnPane.addEventListener("mouseover", function() {
        btnPane.style.display = "block";
        if(document.active)
            document.active.style.backgroundColor = "lightblue";
    });
    btnPane.addEventListener("mouseleave", function() {
        btnPane.style.display = "none";
        if(document.active)
            document.active.style.backgroundColor = "";
    });

    rows.forEach(function(row) {
        row.addEventListener("click", function(e) {
            var posLeft = e.clientX + 10;
            var posBottom = this.offsetTop + this.offsetHeight+8;
            btnPane.style.top = posBottom + "px";
            btnPane.style.left = posLeft + "px";
            btnPane.style.display = "block";
            document.active = this;
        });
        row.addEventListener("mouseleave", function() {
            btnPane.style.display = "none";
        });
    });

    table {
        border-collapse: collapse;
    }

    th, td{
        border-bottom: 1px solid #aaa;
    }

    #mytable tbody tr:hover {
      background-color: lightblue;
    }

    .button-pane {
      display: none;
      position: absolute;
      float: left;
      top: 0px;
      left: 0px;
      background-color: lightblue;
      width: 150px;
      height: 30px;
      padding: 0px;
      text-align: center;
    }

    .button-pane button {
      display: inline;
      cursor: pointer;
    }

    <table id="mytable" border="1" width="100%">
      <thead>
        <tr>
          <td>HEADER 1</td>
          <td>HEADER 2</td>
          <td>HEADER 3</td>
          <td>HEADER 4</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Item 1</td>
          <td>a</td>
          <td>aa</td>
          <td>aaa</td>
        </tr>
        <tr>
          <td>Item 2</td>
          <td>b</td>
          <td>bb</td>
          <td>bbb</td>
        </tr>
        <tr>
          <td>Item 3</td>
          <td>c</td>
          <td>cc</td>
          <td>ccc</td>
        </tr>
      </tbody>
    </table>
<div id="button-pane" class="button-pane">
  <button id="button1">Button 1</button>
  <button id="button2">Button 2</button>
</div>
    </div>

Is there a way to create a popover menu in VueJS without using JQuery

Answer №1

Similar questions

Obtain the time in a 12-hour format with "A.M." or "P.M." using Vuetify

What is the reason behind the failure of executing "this.$refs.inputField.focus()"?

Executing a for loop just once in JavaScript

"Encountering problem with Angular HTTP services: the requested URL is not

The function res.sendFile() does not display files on the browser

[Vue warning]: The custom element <tab-bar-item> is not recognized - have you properly registered the component? When dealing with recursive components,

JQuery email validation failing to function

Employing the power of JavaScript to enable the seamless toggle of an overlay

Is ES5 essentially the same as ES6 in terms of my lambda search?

I'm having trouble getting Tailwind CSS colors to work with my Next.js components. Any tips on how to apply background colors

Extracting the URL of the @font-face declaration in CSS with the use of JavaScript

In JavaScript, a prompt is used to request the user to input a CSS property. If the input is incorrect,

Tips for dynamically updating the API path in VUEX state

The jQuery onClick function functions effectively for the initial two clicks; however, it ceases to

A guide on organizing an array of objects by a specific property using a separate array

Encountering IntegrityError from django.db.utils while trying to send a post request using axios in a Vue

Unspecified reference to this.$refs.canvas in Vue.js

Retrieve JSON information from a document through JavaScript

Strategies for preserving context throughout an Ajax request

Caught up: TypeScript not catching errors inside Promises