Vuetify's personalized time selection tool failing to update data model and issuing an error message

For a while now, I've been grappling with an issue. I decided to create a custom component with a time picker in Vuetify. The Vue.js docs stated that for custom model components, you need to emit the input like this:

    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >

However, despite adding this code snippet, my model isn't updating as expected. An error message "TypeError: Cannot read property 'value' of undefined" pops up. I also attempted using "$emit('input', $event)", but that didn't work either. Here's my component:

TimePicker.vue

<template>
  <div>
    <v-dialog
      ref="dialog"
      v-model="modal2"
      :return-value.sync="time"
      persistent
      full-width
      width="290px"
    >
      <template v-slot:activator="{ on }">
        <v-text-field
          v-model="time"
          :label="label"
          y
          readonly
          prepend-icon="far fa-clock"
          v-on="on"
        ></v-text-field>
      </template>
      <v-time-picker
        v-if="modal2"
        :value="time"
        @input="$emit('input', $event.target.value)"
        full-width
      >
        <v-spacer></v-spacer>
        <v-btn flat color="primary" @click="modal2 = false">Cancel</v-btn>
        <v-btn flat color="primary" @click="$refs.dialog.save(time)">OK</v-btn>
      </v-time-picker>
    </v-dialog>
  </div>
</template>

<script>
export default {
  name: 'TimePicker',
  props: ['value', 'label'],
  data() {
    return {
      time: this.value,
      modal2: false
    };
  }
};
</script>

I have implemented the component in this manner:

<TimePicker v-model="startTime" label="Start Time"></TimePicker>

Answer №1

Would you give this event emission method a try:

<input
    v-bind:value="value"
    v-on:input="onInput"
>

methods: {
  onInput(value) {
    this.$emit('input', value)
  }
}

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

Transform an array from two dimensions to one dimension, while applying specific exceptions

Hello everyone, I'm revisiting a question from before that hasn't been resolved yet. I have a simple requirement - I need a code that will convert my 2D array into a 1D array under one condition. A[0,2,3,7,0,0,5,3][0,2,2,4,0,0,3,0] The desired ...

Guide to implementing a random number generator within a Jquery conditional statement

I am experimenting with if statements, but I'm encountering some difficulties. My goal is to assign random numbers to a variable and then trigger different actions based on a click event. Here's what I've tried so far, but it seems to be fa ...

Angular 5 requires the Google Map API call to be made before initiating the http get request

I am experimenting with URL parameters to make a GET request and then use JSON output to drive a query in Google Maps. Currently, I have managed to make the embedded map function by sanitizing it and passing static data. However, when making the query call ...

Displaying a group of elements in ReactJS

I'm currently working on assembling an array using different JSX components. There's a function I've created that populates this array with components and then returns it. let components = []; switch (obj.type) { case 'title': ...

The system encountered an error while trying to access the property 'enabled' of an undefined object

When working on a reactive form in my code, I need to ensure the values are properly set for the controls. ngDoCheck() { setControlValues(); } ngChanges(changes: SimpleChanges): void { setControlValues(); } private setControlValues() { try { ...

BufferGeometry does not have a defined position attribute

Is there a method to update the buffer geometry in order for an object position in the mesh to be duplicated into it? I have attempted to update the position matrices without success. ...

When modifying the data, the computed information does not update immediately

I have created a Vue.js demo, please take a look below: <template> <div class="index"> <Row> <Select v-for="(select, s_index) in select_data" v-model="selected_data_obj[s_index]" :key="'s-'+s_index" style="widt ...

How important is a neglected parameter in the world of JavaScript?

Curious about the value of an ignored parameter in JS? Imagine a function that requires 2 values as parameters, but you only provide one during the call. What happens to the other parameter? You might think it's undefined, but the code below only show ...

What is the best way to utilize "require" dynamically in JavaScript?

Within the "sample.js" file, there is a JavaScript function structured as follows: var mapDict = { '100': 'test_100.js', '200': 'test_200_API.js', '300': 'test_300_API.js' } function mapAPI() { ...

The JavascriptExecutor is unable to access the 'removeAttribute' property of a null object

While utilizing Javascript executor to remove the readonly attribute, I encountered an error message: Cannot read property 'removeAttribute' of null. I came across various discussions where users suggested that removing AdBlock from Chrome solve ...

"Utilizing Google Charts DataTable to easily adjust column number based on data dynamics

Struggling with managing JavaScript objects... Currently, I am working on generating a Google Chart based on user selections. The process involves two multi-select lists that construct an object as shown below: $('option:selected', $('#slC ...

What methods can be used to identify the pattern entered by the user for data types such as `Int`, `VarChar`, `

I have a dropdown menu containing data types. There is also a text box for entering Regex patterns. If "/test/" is entered in the textbox or "Int" is selected from the dropdown, then it's an incorrect pattern. If "/[0-9]/" is entered in the ...

Discovered an issue with AngularJS involving ng-show and ng-if?

Upon my investigation, I have identified multiple issues with angularjs: <div ng-show="['[]']">this should be displayed but it is not working as expected</div> <div ng-show="[]">this should be displayed but it is not working as ...

How to Implement Field Validation in AngularJS

Using <required> within <input> has not resolved the issue. I also attempted to utilize ng-required="true", but unfortunately, the modal window still closes even if the required field is left empty. Each time the modal closes, a message stating ...

Is there a way to lower the cost with the same value that was used to raise it?

My goal is to adjust the price when the user clicks on the minus icon. However, I want the new price after decreasing to revert back to the initial price. quantityHandler: function (action, product) { // Increase or decrease quantity of product ...

Displaying FontIcon in a NativeScript alert box

Would it be possible to display a fonticon on a Nativescript dialog? Similar to this example? dialogs.alert({ title: // set icon as text message: "Check-in Successful" }).then(()=> { console.log("Dialog closed!"); }); Is it feasible to ...

Error: This issue arises from either a glitch in the Node.js system or improper utilization of Node.js internals

I encountered an issue with setting cookies while creating an authentication mechanism for my service. You can read more about it here. Fortunately, I managed to solve the problem. The root of the problem was attempting to send cookies through 2 separate ...

I'm facing issues with Angular commands not functioning properly even after installing the Angular CLI and configuring the

Every time I attempt to create a new project using Angular CLI by typing: ng n app I encounter the following error message: C:\Users\Venkateshwarn M\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng: ...

The reason for the lack of auto complete functionality in this specific Bootstrap example remains unclear

I've been attempting to implement an auto-complete dropdown feature with dynamic data, but I'm facing an issue where no suggestions are displayed in the dropdown. I found this example on Datalists: https://getbootstrap.com/docs/5.1/forms/form-con ...

Using Angular to make a request to a NodeJS+Express server for a simple GET operation

I need help with making a successful GET request from my Angular component to a NodeJS+Express server. someComponent.ts console.log("Before"); // send to server console.log(this.http.get('/email').map((res:Response) => { console.log(" ...