I'm attempting to create a click event in iView ui. Here's my code:
<DropdownMenu slot="list">
<DropdownItem @on-click="markAsRead">Mark as read</DropdownItem>
</DropdownMenu>
The function markAsRead isn't executing. Any suggestions on how to get it to run?
Reference to iView documentation on Dropdown explains that the Dropdown triggers an "on-click" event when a user clicks on a Dropdown Item, passing the item's "name" as an argument.
To handle the Dropdown functionality, you need to use the "on-click" event (not the standard "click" event) on <Dropdown> itself (rather than on <DropdownMenu> or <DropdownItem>). Your code should resemble this:
<Dropdown @on-click = "setReadStatus(name)">
<a href="javascript:void(0)">
Mark as read/unread
<Icon type="ios-arrow-down"></Icon>
</a>
<DropdownMenu slot="list">
<DropdownItem :name="read">Mark as read</DropdownItem>
<DropdownItem :name="unread">Mark as unread</DropdownItem>
</DropdownMenu>
</Dropdown>
For more information, please refer to the documentation found at this link. The Dropdown element triggers an 'on-click' event that contains the name of the selected dropdown item.
To make sure everything works properly, remember two key points: 1. The name attribute must be set on the DropdownItem element. 2. Capture the on-click event on the Dropdown element and pass the $event as a parameter for handling data with events as you typically would.
Here is an example of what the code should look like:
<Dropdown v-on:on-click="handleDropdownClick($event)">
<DropdownMenu slot="list">
<DropdownItem name="Mark as read">Mark as read</DropdownItem>
</DropdownMenu>
</Dropdown
After clicking on the dropdown menu item, the value of $event will be "Mark as read".
You can achieve the desired functionality by using either @click or v-on:click.
For example, consider the following code:
<DropdownMenu slot="list">
<DropdownItem v-on:click="markAsRead">Mark as read</DropdownItem>
</DropdownMenu>
I am currently facing some challenges while creating a map with markers using data from Google Sheet and leaflet. Despite my efforts, I have encountered a few bugs that are proving to be difficult to resolve: Group Filtering - Although I can successfully ...
I am currently developing a project that involves creating a circle around the location of an item on a Google Map. In the code snippet below, when the show tab is clicked, it should display a circle around the item's location on the map: <div cla ...
Looking to use a Vue.js input for automated testing purposes. How can I successfully set a value and submit it without it being automatically changed back to default data? I have tried the following method to set the value, but it keeps getting overridden ...
import React, { useState } from "react"; import facebook from "../UI/icons/facebook.png"; import Button from "../UI/Button/Button"; import Card from "../UI/Card/Card"; import twitter f ...
Can anyone assist me with an issue I am encountering while using the setInterval() function and then trying to clear it with clearInterval()? The clearInterval() works fine, but the automatic functionality of li elements with a specific class suddenly stop ...
I'm having trouble exporting HTML to PDF using jQuery, especially when the HTML content spans multiple pages in the PDF file. Below is my current code snippet: $("body").on("click", "#downloadPDF", function () { html2canvas($('#dow ...
I am currently developing my inaugural Ionic application. The initial template I utilized was the rudimentary sidemenu layout. $ ionic start myApp sidemenu Afterwards, I crafted a straightforward page featuring a list which appears as follows... <ion ...
I'm currently working on implementing two buttons that will enable navigation to different pages within my React app. However, I encountered an error when attempting to use the button labeled "home." TypeError: Cannot read properties of undefined (rea ...
I am encountering an issue while calling the function, this is just for practice so I have kept everything inside App.tsx. The structure of my class is as follows: enum Actor { None = '', } const initializeCard = () => { //some logic here ...
Trying my hand at building something with Angular for the first time, I'm facing an issue with retrieving JSON data. The data is fetched from a SQL database in JSON format and passed to a template using Angular route: .when('/tasks/:TaskID&apos ...
I recently started developing an angular2 web application that includes a ngx-datatable component. The header columns all have numeric names, but I would like to customize them in the view. Despite my efforts to research this issue, I haven't come ac ...
I am having trouble changing the "class" attribute of a node in SVG using my AngularJS Directive. Even though I've written the code to do so, it doesn't seem to be applied properly. This is the code snippet from my Directive: node = node.data(f ...
Why am I struggling? After dedicating 6 months to learning React.js, I find myself overwhelmed by the multitude of chapters and feeling lost. Could you kindly share your journey with React.js in a step-by-step manner? Your advice would be greatly apprecia ...
I've been working on a project that involves playing sounds for each letter in a list of text. However, I'm encountering an issue where only the last sound file is played instead of looping through every element. I've attempted to delay the ...
I am seeking guidance on how to access the value of "result 2" from my JSON object using jQuery or pure JavaScript. var jsonarray = [{ title: "Category1", items: [{ result: "Item1", //Nested array items2: [{ //How to get the value o ...
I have set up a special compositing layer for a div with the following unique styles: div { position: absolute; height: 50px; width: 50px; background: #900; top: 100px; left: 200px; will-change: transform; transform: translateZ(0); } Afte ...
Recently, I developed a React JS application to import images from external sources and process them. To handle the user's onChange event, I utilized the onChange attribute to execute my handleChange function. However, I encountered an issue where it ...
Exploring new possibilities with Ember js, I am eager to switch from fixtures to using an API. Below is the code I have implemented to fetch the data: App.ItemsRoute = Ember.Route.extend({ model: function() { return $.getJSON('http://som ...
I have been delving deep into JavaScript object operations. My question revolves around the difference between const me = Object.create(person); and const me = person;. Both of these operations provide a similar output as they reference the object to a new ...
Just starting out with React and trying to incorporate a loading animation when the page/url changes on button click - check it out here: https://codesandbox.io/s/cthululel-7zmsl?fontsize=14 Successfully got the animation working on initial load, but runn ...