Learn how to toggle the menu list visibility by clicking on a component in Vue

I seem to be having an issue with closing a menu item in vue and vuetify2. Here is the code snippet that I have:

<v-menu
            transition="slide-y-transition"
            bottom
            left
            offset-y
            nudge-bottom="2"
            :close-on-click="!activeTour"
          >
            <template #activator="{ on, attrs }">
              <v-btn
                icon
                class="ml-md-4"
                v-bind="attrs"
                v-on="on"
              >
                <v-icon>
                  mdi-plus-circle
                </v-icon>
              </v-btn>
            </template>
            <v-list>
            <v-list-item>
              <WorkRegistryDialog class="work-registry-activator">
                <template #activator="{ on: dialog, attrs }">
                  <v-list-item-title
                    v-bind="attrs"
                    v-on="dialog"
                    @click="zamknij"
                  >
                  {{ $t("add_entry") }}
                  </v-list-item-title>
                </template>
              </WorkRegistryDialog>
            </v-list-item>

However, when I try to close the menu by clicking on the v-list-item containing WorkRegistryDialog, it doesn't work as expected. Can anyone offer some assistance with this issue?

I've attempted to add JavaScript listeners without any success.

Answer №1

<section>
    <v-menu
+       v-model="displayMenu"
        transition="slide-y-transition"
        bottom
        left
        offset-y
        nudge-bottom="2"
        :close-on-click="!isActiveTour"
      >
        <template #activator="{ on, attrs }">
          <v-btn
            icon
            class="ml-5"
            v-bind="attrs"
            v-on="on"
          >
            <v-icon>
              mdi-plus-circle
            </v-icon>
          </v-btn>
        </template>
        <v-list>
-         <v-list-item>
+         <v-list-item @click="displayMenu = false">
            <WorkRegistryDialog class="work-registry-trigger">
              <template #activator="{ on: dialogHandler, attrs }">
                <v-list-item-title
                  v-bind="attrs"
                  v-on="dialogHandler"
                  @click="close"
                >
                {{ $t("add_item") }}
                </v-list-item-title>
              </template>
            </WorkRegistryDialog>
          </v-list-item>
</template>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Removing the Shadow from Material UI's Dialog Box

I am currently struggling with the Material UI dialog component that displays information about a location marker. My issue is with disabling the unattractive box shadow that surrounds the component. Despite setting box-shadow: none and trying different so ...

Calculate the total width of all images

I'm on a mission to calculate the total width of all images. Despite my attempts to store image widths in an array for easy summing, I seem to be facing some challenges. It feels like there's a straightforward solution waiting to be discovered - ...

Safari is unable to display the button text, while Chrome has no problem showing it

In Safari, the text of the button is not showing up properly. I am able to retrieve the text using jQuery in the console though. However, there seems to be an issue with recognizing the click event. <div class="btn-group btn-group-lg"> <button ...

Experiencing a problem with XAMPP? Changes made to the code are not reflected after saving

Recently, I've encountered a strange issue with my XAMPP test server while working on a game project. Everything was running smoothly until I noticed that when I make changes to certain files in Notepad++ and save them, the updates are not being refle ...

Capacitor - Error: Trying to access the property 'getToken' on an undefined object

Currently, I am in the process of integrating notifications using the Capacitor FCM plugin in my Android application. However, upon executing the code below in Android Studio, I encountered this error: "TypeError: Cannot read property 'getToken' ...

The jQuery .click() function is not triggering when clicked

$("#backButton-1").click(function() { $("#form-2").empty(); $("#form-1").show(); }); I am experiencing trouble with this code snippet. The form-1 element is hidden, and the backButton-1 is created after the end of for ...

Chrome successfully processes Ajax request, but Firefox encounters failure

I've encountered a peculiar issue with a JavaScript function that is responsible for making an Ajax call to a PHP page for database transactions and data processing. Take a look at the function below: function processQuizResults() { console.log(" ...

JavaScript library declaration files are essential for providing type definitions and enabling

I have encountered a problem with my JS library and its declaration files (*.d.ts) in my TypeScript projects. For some reason, my TS project seems to be ignoring these declaration files. To investigate this issue further, I decided to conduct a simple tes ...

PHP not receiving POST information from $.ajax call

My JavaScript triggers a POST method when the datepicker loses focus, calling the script rent-fetch-pick-up-point.php. However, the PHP script gets stuck at the if-statement because it's not receiving the POST data. The datepicker is associated with a ...

Is it possible for JavaScript to identify modifications in the HTML, like an input made with Ctrl+Shift+I?

Check out this website I'm currently working on. As a fun challenge for users, we're encouraging them to use ctrl+shift+i to manipulate the HTML and modify certain elements. Is it possible for Javascript or CSS/HTML to detect these changes? For ...

step by step guide on swapping a portion of a JSON string

I need to eliminate the character "C" from keys that start with C_ in the following JSON string. Here is the JavaScript object I have: var jsonData= { key1:val1, key2:val2, C_100:1, C_101:2, C_102:3, } The desired output should look like this: v ...

The React JSX error message "Maximum update depth exceeded" occurs when there

It appears that I am facing an issue of creating an infinite loop while passing props from one class to another. Despite ensuring that the buttons are correctly bound and trigger only once, the problem persists without any solution in sight after thorough ...

Sorting after grouping in AngularJS is a breeze

After using lodash.js groupBy to organize my collection, the order is correct when I log it with console.debug. However, when I try to display it in the UI using ng-repeat, the ordering gets messed up. var list = [{id:1,categoryId:1,name:test1}, ...

Is there a benefit to using the Angular LocalStorageModule alongside angular-cache?

To configure the angular-cache, follow this setup: app.service('myService', function ($angularCacheFactory) { // This cache will synchronize with localStorage if available. Upon each app load, it will attempt to retrieve any previously save ...

What is the best method for creating table column text within a Bootstrap Modal through JSON data?

I am currently working on creating a table by using key value pairs from a JSON object. The keys will represent column-1 and the values will correspond to column-2. The desired output can be viewed at this link. I am wondering if there is a standard method ...

The inner workings of Virtual DOM in React and Vue disclosed

I am a student experimenting with creating my own Virtual DOM for a college project in JavaScript, keeping it simple without advanced features like props or events found in popular frameworks like React and Vue. I'm curious about code splitting. If I ...

Encountered a CSS error while trying to compile the project with npm build

When attempting to build the project, I encountered a postcss error. After some debugging, I discovered that the imports below were causing the issue: @import "@material/button/dist/mdc.button.min.css"; /*material text box css*/ @import "@material/float ...

The link containing special characters like % cannot access the api

I am facing an issue with retrieving a signUrl from S3. When I make the call with special characters like %, my code does not parse it correctly and I receive a 404 not found error. Here is the ajax request I am using: My API setup: app.get('/websi ...

Tips for creating an array within an AngularJS Service and effectively sharing it across two controllers

I have two controllers, FirstController and SecondController, along with a service defined as follows: app.factory('Data', function(){ return []; }); In both controllers, I am utilizing the service in this manner: app.controller("FirstCont ...

Dragging elements with jQueryUI multiple times

Is there a way to configure drag and drop functionality so that one element can be dragged multiple times? I attempted to create something similar to this http://jsfiddle.net/28SMv/3/, but after dragging an item from red to blue, the element loses its abi ...