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.7] Missing rounding to nearest step in VNumberInput HOT 6
- [Feature Request] Clear default value on VNumberInput focus
- [Feature Request] Possible to extend default DateAdapter with functions
- [Feature Request] border color class
- [Bug Report][3.6.7] Treeview wrong slots in documentation HOT 1
- [Bug Report][3.6.7] Infinite-Scroll load-event not fired after reseting Filter
- [Bug Report][3.6.7] VAutocomplete and VSelect shows value "wrong" of v-model until items are fetched HOT 1
- [Documentation] Firefox search plugin
- [Bug Report][3.6.4] v-dialog fullscreen not working when width it's set
- [Feature Request] Set table-header-font-weight to 700 as default
- [Bug Report][3.6.X] VNavigationDrawer don't close in mobile
- [Bug Report][3.6.8] VTreeview slow performance on expand HOT 8
- [Bug Report][3.6.7] V-Menu prevents form submit when user presses Enter key in a text-input field HOT 1
- [Bug Report][3.6.8] Click-outside directive does not handle touch events correctly
- [Bug Report][3.6.8] VNavigationDrawer width does not react when model-value is a computed property
- [Feature Request] VAutocomplete add option to disable removing of already selected items on Backspace keydown when search si focused
- [Bug Report][3.6.8] VAutocomplete with auto-select-first selects highlighted option even when clicked outside
- [Bug Report][3.6.7] v-model custom modifiers doesn't seem to work with v-date-input
- [Bug Report][3.6.8] v-data-picker has a bug regarding the prop "max-date"
- [Feature Request] Self-validate for v-checkbox is unavailable
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.