Getting a specific element of the "Event" object using javascript/typescript

Question

Getting a specific element of the "Event" object using javascript/typescript

Overview

I successfully integrated a select box into my Vue.js/Nuxt.js application using Vuetify.js.
I utilized the @change event to capture the selected value.

<v-select
  v-model="selectedStartTime"
  :items="startTime"
  item-text="text"
  item-value="value"
  @change="onChangeEndTime"
/>

onChangeEndTime (e : Event) {
  console.log(e)
}

When checking the Developer Console, I noticed that the selected value is displayed as an object.
I am looking for a way to specifically retrieve the 'hour' and 'minute' values within the onChangeEndTime function.

https://i.sstatic.net/RdfIB.png

Attempts Made

console.log(e.target) resulted in undefined.
console.log(e.hour) provided the correct value, but triggered an error message
```
Property 'hour' does not exist on type 'Event'.Vetur(2339)
```
.

javascript typescript vue.js nuxt.js vuetify.js

Answer 1

Answer №1

v-select uses the selected value itself as the argument for the change event, not an Event object. This selected value is an object that contains hour and minute properties.

To ensure the correct type for the e parameter, you can specify it as { hour: number, minute: number }:

onChangeEndTime (e : { hour: number, minute: number }) {
  console.log(e.hour) // ✅ e.hour exists
}

Answer 2

v-select uses the selected value itself as the argument for the change event, not an Event object. This selected value is an object that contains hour and minute properties.

To ensure the correct type for the e parameter, you can specify it as { hour: number, minute: number }:

onChangeEndTime (e : { hour: number, minute: number }) {
  console.log(e.hour) // ✅ e.hour exists
}

Getting a specific element of the "Event" object using javascript/typescript

Overview

Attempts Made

Answer №1

Similar questions

The dynamic loading of videos through the YouTube API

Is it possible to resize an image in a single direction?

using a variable object to load, access data, and handle errors through mutations

Include a class above the specified element; for instance, apply the class "act" to the "<ul>" element preceding the "li.item1"

Combining the namespace and variable declarations into a single statement

Navigating the storing and organizing of user data through Firebase's simplistic login feature for Facebook

Guide to showing an uploaded image in a child component using Vue.js

TypeError: Unable to find TextEncoder in mongoose and jest when using TypeScript

Retrieve the output of a function in TypeScript

Creating a table using data from an Angular form

modifying the click state using a variable in jquery

Leveraging the callback function to display information from a JSON file

Relay information between requests using a RESTful API and various data formats, such as JSON, XML, HTML

Node.js Monitoring Statistics Displayed in Command Line Interface

Looking to target an element using a cssSelector. What is the best way to achieve this?

What is the best method for extracting data from a node?

Guide to updating the canvas in Chart.js based on a user-defined x-axis range

Learn the steps to showcase the output in a paragraph using ReactJS

Adjust picture dimensions when the window changes (using jQuery)

Struggling to separate a section of the array