Error in Vue & TS: Property does not exist

Currently working with Vue.js and TypeScript, I've managed to create a DatePicker. However, I'm facing issues when trying to build the project due to TypeScript errors.

Below is a snippet from my DatePicker TypeScript file:

import Vue from "vue"
export default Vue.extend({
  data: () => ({
    message1: "",
    date: null,
    menu: false
  }),
  watch: {
    menu(val) {
      val && setTimeout(() => (this.$refs.picker.activePicker = 'YEAR'))
    }
  },
  methods: {
    save(date){
      this.$refs.menu.save(date)
    },
  }
})

Errors are present in the date variable, save method, and ActivePicker.

Does anyone have any suggestions on how to properly "import" them into my DatePicker.ts file? Also, I'm organizing my code across multiple files like so:

DatePicker.vue
DatePicker.html
DatePicker.ts

Thank you for any assistance!

Antoine

Answer №1

It appears that the issue lies in the incorrect usage of an arrow function. When you utilize setTimeout with an arrow function, the 'this' binding may not work as intended. To resolve this, consider replacing () => {...} with function () {...}

Alternatively, you can utilize this.$nextTick(() => {....})

(documentation)

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

Is the Vuex mutation properly formatted?

Is the mutation method correctly written to modify the initial state array? I'm uncertain about the last few lines of the mutation method. What am I missing, if anything? // Storing state: { flights: [ {trip_class: 0, number_of_change="1"}, ...

How can TypeScript leverage the power of JavaScript libraries?

As a newcomer to TypeScript, I apologize if this question seems simplistic. My goal is to incorporate JavaScript libraries into a .ts file while utilizing node.js for running my program via the console. In my previous experience with JavaScript, I utilize ...

How can we effectively divide NGXS state into manageable sections while still allowing them to interact seamlessly with one another?

Background of the inquiry: I am in the process of developing a web assistant for the popular party game Mafia, and my objective is to store each individual game using NGXS. The GitLab repository for this project can be found here. The game includes the f ...

What is the process for importing a map from an external JSON file?

I have a JSON file with the following configuration data: { "config1": { //this is like a map "a": [ "string1", "string2"], "b": [ "string1", "string2"] } } Previously, before transitioning to TypeScript, the code below worked: import ...

Vue-ChartJS does not exhibit reactive behavior

Brand new to constructing charts and currently facing an issue where the chart is not updating dynamically even though the data is being loaded into the dataset. This is how my chart.js file looks: import { Line, mixins } from 'vue-chartjs' con ...

Arrange text in a line below neatly in a list

My goal is to line up items on the same row, as shown in the screenshot. I need the opening hours to align consistently in the list. The data is retrieved from a database and displayed using Vue. This is how I currently display the opening hours and days. ...

Navigating through Router Parameters in VueJS

Currently, I am in the process of developing a blog using Vue.js and I am still learning the ropes. To explain briefly, I have a list of dynamic elements that are displayed on the screen. When a user clicks on one of these items, I want to navigate to the ...

Vue.js v-for dynamically creates HTML blocks that capture the state of collapse with two-way data binding

I am currently working on capturing the click action state within an HTML v-for generated block for a collapsible function. I have set up a data table and it seems that the state is being captured correctly. However, I am facing an issue where the displa ...

Using v-model to dynamically update the router based on certain conditions

Check out this demo showcasing a navigation menu with nested items. Clicking "more" reveals the expanded list, which can be set to always open using v-model="item.model" with model = true. My goal is to have the submenu stay open only when the user is on ...

Can the month dropdown in react-datepicker be modified to display numbers instead of names?

Here is the code I have: <DatePicker selected={value?.toDate()} onChange={(date) => this.handleMonthChange(date)} inline showMonthYearPicker dateFormat={this.props.formatString} /> https://i.sstatic.net/SkdGP.png I am seeking ...

Error message from webpack: It appears you are missing a necessary loader to handle this specific file type

I'm struggling with building my server.ts typescript file for the backend. I have some imports, but my app is not building. Here is a snippet from my typescript file: import * as Express from 'express' import * as Session from 'expres ...

The hyperlinks are no longer functioning correctly, such as the example: https://unpkg.com/[email protected]/dist/vue.min.js

I'm running into issues with the CDN link from unpkg not working anymore. Even older versions are failing to load. https://unpkg.com/[email protected] /dist/vue.min.js Is there an alternative link that I can use instead? Thanks! <script src=&qu ...

Utilizing Chart.js in Vue.js: A Guide to Extracting Data from APIs for Chart Display

I am a beginner in Vue.js and I'm interested in learning how to retrieve data from an API to populate a chart. Currently, I have hard-coded the data for "date" and "challenge" directly into my code. Now, I would like to fetch this data from an API in ...

Arranging Data in Arrays using Angular 4 GroupBy Feature

I'm working with an array structured like this: var data = [ { student: "sam", English: 80, Std: 8 }, { student: "sam", Maths: 80, Std: 8 }, { student: "john", English: 80, Std: 8 }, { student: "j ...

How can I effectively link data to an Angular Material dropdown in Angular 5?

Essentially, I am updating a user profile with user information that needs to be bound to the corresponding fields. this.editOfferprice= new FormGroup({ xyz : new FormControl(xxxx,[]), xxx: new FormControl(xxxx,[Validators.required]), ...

Is there a way for me to determine if there are elements in one object array that exist in another object

Is there a method to check if two object arrays have any common elements, and if so, find the intersecting object? Similar to a Contains function. For instance, in the provided example, ProductId3 in Object Array 1 is also present in Object Array 2. I&apo ...

Restricting the options available in a v-select component based on a specified

When a record in a data table is clicked, a v-form opens to display the record's information. Within this form, there is a v-select that shows the booking status options with the current status already selected. <v-form ref="BookingForm" ...

Angular 5: Issues with retrieving response using HttpClient's get request

Alright, so typically I work with Angular 1.*, but I decided to dive into Angular 5 and man, it's been a bit of a challenge. It feels unnecessarily complex, but oh well... So I'm trying to make an HTTP call, and I have this node API that is retu ...

Exploring an array in React using typescript

I have a persistent data structure that I'm serving from the API route of my Next.js project. It consists of an array of objects with the following properties: export interface Case { id: string; title: string; participants: string[]; courtDat ...

Guide to utilizing custom fonts in a VUE application

I'm currently working on my first Vue project and despite following various examples and the official documentation, I am struggling to resolve an issue regarding importing fonts locally in my project. https://i.sstatic.net/mXryH.png Within my `` tag ...