Comments (1)
I wanted to click on an event and get the details of that event, but it was hard to retrieve the details of the clicked event,
so I couldn't call the server to get the specific event details that I clicked on.
Here is my solution for this:
I just count the 'v-chip__content' (in month-day format) on the screen.
When you fetch monthly data from the server, if you retrieve it sorted by date and time,
you can know which event you are currently clicking on.
This is the code to find the index of the event on the screen and print it with console.log.
Just so you know, my current code is a temporary solution until Vuetify further develops the data format for the calendar.
findElementIndex(event) {
const clickedElement = event.target.closest('.v-chip__content');
if (!clickedElement) {
console.log('Clicked element is not a .v-chip__content element');
return;
}
const allElements = Array.from(document.querySelectorAll('.v-chip__content'));
const elementIndex = allElements.indexOf(clickedElement);
console.log('Clicked .v-chip__content Element Index:', elementIndex);
}
from vuetify.
Related Issues (20)
- [Bug Report][3.6.1] VDataTable mobile mode is based on screen width, not container width HOT 4
- [Bug Report][3.6.1] VCarouselItem and content-class
- [Bug Report][3.6.1] VDataTable mobile shows header for sort & select when neither is applicable HOT 1
- [Bug Report][3.6.0] VSelect menu shifted few pixels to the right HOT 8
- [Bug Report][3.6.1] TypeError: Cannot convert object to primitive value HOT 1
- [Bug Report][3.5.18] When using subtitles you do not see the multiple selection box
- [Bug Report][3.6.3] ref behaviour changed HOT 5
- [Bug Report][3.6.3] The font-weight of the header of the data-table differs between the normal and the mobile version HOT 1
- [Bug Report][3.6.3] Tooltip directive modifiers don't work
- [Feature Request] Simplify defaults assignment for input like components (textfields, selects, autocompletes, etc.) HOT 2
- [Bug Report][3.6.3] Expand transition occasionally throwing error
- [Bug Report][3.6.3] VDataTableServer - on mobile - is ignoring #headers slot HOT 2
- [Feature Request] VConfirmEdit - expose dirty/pristine status
- [Bug Report][3.6.0-alpha.0] data table sort field in header is always showing in version 3.6.0 and higher HOT 3
- [Bug Report][3.6.3] v-tooltip doesn't work with Nuxt 3 HOT 3
- [Bug Report][3.6.3] VTabs scoped class doen't works HOT 2
- [Bug Report][3.6.3] VTabs attribute inheritance runtime warning
- [Bug Report][3.6.3] VDialog location and offset props do not affect dialog HOT 2
- [Bug Report][3.5.15] Combobox does not work properly with type date/month HOT 2
- [Bug Report][3.6.3] labs/number inputs (v-input-number) unable to tab out of control HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vuetify.