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

Is it possible to restrict optionality in Typescript interfaces based on a boolean value?

Currently, I am working on an interface where I need to implement the following structure: export interface Passenger { id: number, name: string, checkedIn: boolean, checkedInDate?: Date // <- Is it possible to make this f ...

javascriptangulartypescript

Tips for inserting the <style> element within a Vue.js component

Currently working with Vue.js v2, I am facing an issue where I have a CSS stylesheet stored as a string in a variable. import sitePackCss from '!!raw-loader!sass-loader!../../app/javascript/styles/site.sass'; I am trying to generate a <style& ...

cssvue.jswebpackvuejs2

Discover a technique to display every individual "echo" statement from PHP in sequence, rather than waiting for the entire script to finish executing

I have developed a PHP script that takes some time to execute and displays multiple "echo" statements as the progress is being made. The script connects to an FTP server, deletes all contents, and then uploads new files. Everything is functioning correctly ...

javascriptphpajax

The powerful combination of Laravel 10, Inertia, Vue 3, Vite, and the convenience of self-hosted

I'm having trouble integrating TinyMCE as a self-hosted solution. Despite following the steps outlined at this link, the editor still fails to load in a self-hosted manner and prompts for a key: After struggling with this issue for two days without s ...

laravelvue.jsvuejs3viteinertiajs

Parsing JSON data on the client side in an ASP.NET application

I am currently working with JSON data that looks like this: "Table":[ { "AF":2000.00 "RegionNumber":1 "RegionName":"Black Sea" }, { "AF":100.00 "RegionNumber":1 "RegionName":"Black Sea" }, { "AF":15000.00 "RegionNumber":2 "RegionName":"Ista ...

javascriptjson

Display a message stating "No data available" using HighCharts Angular when the data series is empty

My Angular app utilizes Highchart for data visualization. One of the requirements is to display a message within the Highchart if the API returns an empty data set. I attempted a solution, but unfortunately, the message does not appear in the Highchart a ...

javascriptangularhighcharts

Uniform Height for Several Selectors

I came across a script on Codepen created by RogerHN and decided to customize it for a project I'm currently working on: https://codepen.io/RogerHN/pen/YNrpVa The modification I made involved changing the selector: var matchHeight = function ...

javascriptjquery

Is it possible to use Vuelidate for password validation in Vue.js?

I found a helpful reference on How to validate password with Vuelidate? validations: { user: { password: { required, containsUppercase: function(value) { return /[A-Z]/.test(value) }, containsLowercase: fu ...

javascriptvue.js

What is the best way to manage div visibility and sorting based on selections made in a select box?

Explaining this might get a bit confusing, but I'll do my best. In my setup, I have two select boxes and multiple divs with two classes each. Here is what I am trying to achieve: When an option is selected, only the divs with that class should be ...

javascriptjqueryselecthideshow

The type '{ children: Element[]; }' does not include the properties 'location' and 'navigator' that are present in the 'RouterProps' type

Struggling to implement React Router V6 with TypeScript, encountering a type error when including Routes within the `<Router />` component. The error message indicates that the children property passed to the Router is of an incorrect type, despite u ...

javascriptnode.jsreactjstypescriptreact-router-dom

Is a missing dependency causing an issue with the React Hook useEffect?

I've encountered an issue with the following code snippet, which seems to only depend on [page]. Despite this, I am receiving the error message: React Hook useEffect has a missing dependency I've come across similar discussions suggesting to com ...

javascriptreactjs

What is the best way to align text in the center of a div?

I just created this dropdown menu, but I am encountering an issue. Whenever I resize the div or h4 element, the text ends up at the top. Even after trying to solve it with text-align: center;, the problem persists. Here is a visual representation of what ...

javascripthtmlcss

How to Target a Specific Element Using its Class with jQuery

Hey there! I'm currently working with the following snippet of HTML code: <li class="grey"> <div class="row"> <button id="test" style="width:50%;" class="btn btn-blue-white cartBtn">Add to Cart</button> </div ...

javascriptjqueryajax

What's the alternative now that Observable `of` is no longer supported?

I have a situation where I possess an access token, and if it is present, then I will return it as an observable of type string: if (this.accessToken){ return of(this.accessToken); } However, I recently realized that the of method has been deprecated w ...

javascriptangulartypescriptrxjs

Trigger the opening of a Vuetify v-dialog when the mouse leaves

I want to trigger a v-dialog when the user exits the window. This is what I have implemented: <v-dialog v-model="showPopinAlert"> <v-card>alert</v-card> </v-dialog> and in my script, the event is in mounted(): data () { ...

vue.jsvuetify.js

Changing a string to uppercase and lowercase

I am currently working on a software that takes a string, divides it, capitalizes the first letter of the first string, and capitalizes all letters in the second string. Below is the code snippet: var fullName = "ThEoDORe RoOseVElT"; function nameEditor( ...

javascriptstring

Choosing Vue select options depending on a condition

I am working on a dropdown template with Vue.js and have encountered some challenges. Here is the basic structure of my dropdown: <select v-model="selectedClient" class="stat-select text-u-c"> <option disabled value="">Please select a Client ...

typescriptvue.jsvuejs2

When using Google Maps Autocomplete, always make sure to input the full state name instead of just the state

Utilizing the Google Maps autocomplete API, we have enabled our customers to search for locations in the format of city, state, country. The functionality is effective overall, but a recurring issue arises when searching for cities, such as 'Toronto&a ...

javascriptjquerygoogle-mapsautocompletegoogle-geolocation

Utilize Jquery to dynamically modify the content on a webpage

I am looking to use Tampermonkey in order to reverse the text on a specific website, like BBC News. I have already started working on a script that can replace certain text, but I am facing difficulty in accessing all the text present on the page efficient ...

javascriptjquery

Can a string variable be passed as a file in a command line argument?

Running a command line child process to convert a local file to another format is something I need help with. Here's how it works: >myFileConversion localfile.txt convertedfile.bin This command will convert localfile.txt to the required format an ...

javascriptnode.jsexpress