The <el-dropdown> function is currently facing a problem and is unavailable for use

While using Element-Plus, I've encountered an issue with the el-dropdown component. It doesn't display as a functional dropdown menu when imported into my project.

Below is the code snippet I have used:

<template>
  <div>
    <el-dropdown>
    <span class="el-dropdown-link">
      Menu<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item>黄金糕</el-dropdown-item>
      <el-dropdown-item>狮子头</el-dropdown-item>
      <el-dropdown-item>螺蛳粉</el-dropdown-item>
      <el-dropdown-item disabled>双皮奶</el-dropdown-item>
      <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
  </div>
</template>

This is how it appears/rendered in my project:

enter image description here

Upon hovering over it, only a black border is displayed and 'el-menu-item' cannot be found within 'Elements'. Unsure of what's causing this issue as there are no CSS styles affecting it visibly.

javascriptvue.js

Answer №1

It seems that you have made a mistake in using the slot syntax.

<el-dropdown-menu slot="dropdown">
 ...
</el-dropdown-menu>

According to the instructions provided in the Element Plus documentation, it should be structured as follows:

<template v-slot:dropdown>
  <el-dropdown-menu>
  ...
  </el-dropdown-menu>
</template>

You can also use the shorthand method like this:

<template #dropdown>
  <el-dropdown-menu>
  ...
  </el-dropdown-menu>
</template>

For a live example, check out this codepen demonstration.

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

Storing input field values in JavaScript using the onchange event handler.Would you like a different revision

I am looking to calculate the area by multiplying width and height entered into input fields, and then display the result. Any guidance would be greatly appreciated. Thank you! Here is my current code. const width = document.querySelector("#width"); con ...

javascripthtmlcssonchangeinput-field

Detect the element that initiated the AJAX call in Jquery event handling

My goal is to capture the beforeSend event for all form submits on my site without interfering with jquery.unobtrusive-ajax.js. I've attempted the following method: $(document).on("ajaxSend", function (e, request, settings) { console.log ...

javascriptjqueryajax

Navigating through child elements within a div using JavaScript

I recently coded a div using this snippet... let sidebarBox = document.createElement("div"); sidebarBox.id = "sidebarBox"; ...and then I created a second div like so... let sidebarAd = document.createElement("div"); sidebarAd.className = "sidebarAd"; B ...

javascripthtml

Error TS2403: All variable declarations following the initial declaration must be of the same type in a React project

While developing my application using Reactjs, I encountered an error upon running it. The error message states: Subsequent variable declarations must have the same type. Variable 'WebGL2RenderingContext' must be of type '{ new (): WebGL2 ...

javascriptreactjstypescriptnodes

Is there a way to generate bootstrap divs by parsing csv text?

As I am working on a Bootstrap 3 image gallery, I have noticed that there are multiple recurring divs with a similar structure as shown below: <figure class="col-1 picture-item" data-groups='["groupA"]' data-date-created="2018" data-title=" ...

javascriptphpjqueryhtmltwitter-bootstrap-3

Tips for broadcasting a router event

Currently, I am working with 2 modules - one being the sidenav module where I can select menus and the other is the content module which contains a router-outlet. I am looking for the best way to display components in the content module based on menu selec ...

javascriptangularroutereventemitterrouter-outlet

Sorting custom data in a Vue data table, prioritizing null values to be displayed

Currently, in my VueJS v-data-table setup, I am facing a challenge with custom sorting functions. The table has both numeric and string columns, with some null values scattered throughout. My goal is to sort the data by placing null values at the end of ea ...

javascriptvue.jssortingvuetify.js

Experiencing an excessive number of re-renders can be a common issue in React as it has limitations set in place to prevent infinite loops. This

I have integrated React context to access the login function and error from the context provider file for logging into the firebase database. I am trying to display any thrown errors in the app during the login process. However, I encountered an issue whe ...

javascriptreactjsreact-nativereact-hooksreact-context

Node.js client-sessions malfunction when not utilized as a primary callback

When utilizing express.Router, I'm attempting to create a middleware for a particular router in my application that will establish and handle a session. However, this approach fails if the client-sessions session is not invoked directly by Router().us ...

javascriptnode.jsexpress

Creating Production Files for Web using RxJs and TypeScript

I am interested in developing a JavaScript Library using RxJs (5.0.0-Beta.6) and TypeScript (1.8.10). My TypeScript file is successfully compiling. Below are the files I have: MyLib.ts: /// <reference path="../../typings/globals/es6-shim/index.d.ts" ...

javascripttypescriptrxjstypescript1.8rxjs5

What is the best way to create an AngularJS page with a direct link that will dynamically affect the content on the

I have a webpage similar to Google search where the backend generates a list of items. The page features an HTML form with multiple fields for users to modify values, resulting in a refreshed list of items from the backend. Currently, users can create a ...

javascriptangularjslocation-provider

Vue's beforeRouteEnter hook patiently awaits for the child component to complete its request

My Vue app utilizes beforeRouteEnter to load data and prevent the undesirable "flash of unloaded content." Loading data on some pages is straightforward: async beforeRouteEnter(to, from, next) { const newestPosts = await getNewestPosts(); next(vm ...

javascriptvue.jsvue-routerbeforerouteenter

Storing the subscription value retrieved from an API in a global variable

I am trying to find a way to make the data retrieved from an API accessible as a global variable in Typescript. I know that using subscribe() prevents this, so I'm looking for a workaround. Here is the API code: getResultCount(category:any):Obs ...

javascripttypescript

Making a chain of multiple AJAX requests using jQuery

My current challenge involves retrieving data from select options on a website using JavaScript. Specifically, I am trying to obtain a list of zones within my country from a website that has this information. The issue I am facing is the hierarchical disp ...

javascriptjqueryajax

Ways to identify input that has been altered dynamically

I'm currently trying to figure out why I can't seem to detect any input changes with the code snippet below: $("#fname").on("change", function () { console.log("The text has been changed."); }); $("button").o ...

javascriptjquery

Filtering a table using jQuery based on the class or data attributes

Issue arises when selecting the first "Icon" shows "Not found", then opting for "Talisman" does not display. It should show "Not Found". Is this achievable? Add the classes f-Icon, f-Ring, f-Neck. Then search for the value by class. Select either "Icon R ...

javascriptjquery

Utilizing Express REST API with Postgres through the HTTP method

I am currently working on implementing REST APIs with Express and Postgres. I have a scenario where I need to delete all instances from a table based on the user_id foreign key, and then insert new instances with the same user_id. I'm unsure which HTT ...

javascriptnode.jspostgresqlresthttp

Angular in conjunction with socket.io does not immediately show messages on screen

I am currently working on developing an instant messaging app (chat) using socket.io and Angular. I have two main files: index.html and index.js as shown below. The chat functionality is working well, but I am facing an issue where the messages do not appe ...

javascriptangularjsnode.jssocket.io

Creating beautiful prints with images

I have been tasked with developing an MVC C# application where the contents of a div are dynamically created using an AJAX call to fetch data from a database. Upon successful retrieval, the content is then displayed as a success message in JavaScript. Here ...

javascripthtmlcssajax

What could be causing the "undefined" property error in my Vue.js component?

In my Vue.js application, I have several components that are structured similarly and are all throwing the same error: TypeError: Cannot read property 'id' of undefined I initially attempted to resolve this issue by enclosing {{ jobs[0].id }} w ...

javascriptvue.js