Issue with VueJS: It is not possible to import a computed property from another computed property

Utilizing a computed property to retrieve an id parameter from the route URL like this:

export default defineComponent({
  computed: {
    extractionId() : string {
      return this.$route.params.id as string;     
    },
    releves() {
      let extractionId = this.extractionId;
      return this.$store.getters.getExtractionById(extractionId)
    }
  },
// ....

Encountering an error in releves when trying to access this.extractionId, showing the following error message:

Property 'extractionId' doesn't exist on type 'CreateComponentPublicInstance<{ [x: `on${string}`]: ((...args: any[]) => any) | undefined; } | { [x: `on${string}`]: ((...args: never) => any) | undefined; }, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, ... 10 more ..., {}>'.

Is it not possible to rely on another computed property?

typescriptvue.jsvuexvue-options-api

Answer №1

The error message provided no assistance whatsoever. In reality, Typescript requires that both of the computed properties explicitly declare their return type. I neglected to specify the return type for my releve property, so I made the following adjustments:

  export default defineComponent({
    computed: {
      extractionId() : string {
        return this.$route.params.id as string;
      },
      releves(): number[] {
        let extractionId = this.extractionId;
        return this.$store.getters.getExtractionById(extractionId).releves
      }
    },

After making these changes, everything worked smoothly.

Additional information can be found at: https://vuejs.org/guide/typescript/options-api.html#typing-computed-properties

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

An issue occurred during rendering: "TypeError: Unable to access the 'smAndDown' property as it is undefined" within the materialui framework

I have been attempting to troubleshoot this issue, but I am unable to resolve it. The error message is: "TypeError: Cannot read property 'smAndDown' of undefined." Found in: ---> at src/components/AppToolbar.vue at src ...

vue.jsvuetify.js

Using the Async Pipe within a template inside an ngFor directive causes a series of HTTP GET requests to

Below is a component Template I am working with: <div *ngFor="let ctrl of data; trackBy:ctrl?.Id"> <div *ngIf="getNext(ctrl.nextDate) | async as next"> <span>{{next | date: 'dd.MM.yyyy'}}</span> </div> ...

angulartypescriptobservablerxjs5

The 'state' property is not found on the 'FetchPeriod' type

Currently, I am embarking on a journey to grasp ReactJS by following a tutorial provided at this Tutorial. Being a novice in the programming language, I find myself at a loss as to what steps to take next. One roadblock I encountered was when attempting ...

reactjstypescriptreact-routerreact-props

"Vue.js integrates seamlessly with Tracking.js for advanced tracking

Has anyone successfully integrated the tracking.js library into a vueJS application? I followed these steps to install the package: npm install --save tracking After that, I defined the library in my main.js file like this: import tracking from 't ...

javascriptvue.jsnpmtracking.js

The name 'Landbot' cannot be located. Have you meant to type '_landbot' instead?

I'm currently in the process of integrating Landbot into my React.js application with TypeScript. I'm following this [doc] 1. However, I'm facing an issue where the code inside useEffect (new Landbot.Container) is causing an error. 'C ...

htmlcssreactjstypescriptfrontend

Uploading Files using Vue.js and Laravel

Struggling with a simple User Avatar update using vue and laravel, I'm having trouble identifying the issue. Within my vue component, I have this form and script: <form @submit.prevent="updateAvatar" action="#" method="POST" enctype="multipart/fo ...

laravellaravel-5vue.js

Place a new button at the bottom of the react-bootstrap-typeahead dropdown menu for additional functionality

Currently, I have successfully implemented the React Bootstrap Typeahead with the desired options which is a good start. Now, my next challenge is to integrate a custom button at the end of the dropdown list for performing a specific action that is not ne ...

javascriptreactjstypescriptreact-bootstrap-typeahead

What is the best way to modify the class of a particular PrimeVue component?

Recently, I started utilizing the Tailwind PrimeVue ProgressBar UI component in my project. One of my requirements was to dynamically change the color of the progress bar based on its value. To achieve this functionality, I wrote a method that takes the ...

vue.jsprimevue

NavigAuth - NativeScript Vue's Innovative Authentication-driven Navigation

After spending hours trying to figure this out, I need to ask for help. How can I create a simple Auth-based Navigation within my App? I have successfully set up a Firebase auth user inside my Vuex using an auth listener. Now, all I want is to display th ...

javascriptvue.jsnativescriptnativescript-vue

Error message received when attempting to remove object in Laravel and Vue framework

My aim is to delete a record in Vue successfully. Although the deletion of records works, I am encountering an error message in the console. 405 (Method Not Allowed) The error appears in the network tab as: "exception": "Symfony\Component\ ...

laravelvue.js

What methods are available to change one JSON format into another?

I am receiving JSON data from a Laravel API in the following format: [ { "id":48, "parentid":0, "title":"Item 1", "child_content":[ { "id":49, "parentid":48, "title":"Itema 1 ...

javascriptphpjsontypescript

Experiencing a glitch with the Realtime Database feature on Firebase

// db.js file import * as firebase from "firebase/app" import "firebase/database" const config = { apiKey: "" ... } const db = firebase.initializeApp(config) export default db // App.vue ...

javascriptfirebasevue.jsfirebase-realtime-database

Steps for initiating a customized event using vue test helpers?

I have recently started using Vue and have set up a router-link with a VueRouter to direct users to a specific page. <router-link @click.native="onRouteClicked(index)" /> Now I need to simulate the click.native function. I am aware of the trigger ...

vue.jsvue-routervue-test-utils

What is the reason behind Typescript errors vanishing after including onchange in the code?

When using VSCode with appropriate settings enabled, the error would be displayed in the following .html file: <!DOCTYPE html> <html> <body> <div> <select> </select> </div> <script&g ...

typescriptvisual-studio-codejsdoc

Examining React components with Enzyme for event usage in components

Struggling with testing react components that utilize event.target in events has been a challenge for me. Take for example the component code snippet below; import * as React from 'react'; import { generateGuid } from '../../../utilities/Gu ...

reactjstypescriptenzyme

Nuxt's dynamic route generation results in a 400 error status code

Currently integrating Nuxt with my app and aiming to establish a connection with my server to retrieve data. To create dynamic routes, I am utilizing the built-in generate method but facing some challenges. Upon executing the generate command, I encounte ...

javascriptvue.jsnuxt.js

Activate universal ESlint configuration

I would like to set up an ESLint configuration globally so that I don't have to initialize it in every new project. So, I proceeded to install ESLint and some related configurations globally using the following command: npm install -g eslint eslint-c ...

javascripttypescripteslinteslintrc

Extending Two Classes in Typescript: A Complete Guide

I am looking for a way to efficiently save time by reusing common code across classes that extend PIXI classes within a 2D WebGL renderer library. Object Interfaces: module Game.Core { export interface IObject {} export interface IManagedObject e ...

javascriptooptypescriptextends

The error "Property 'center' is not a valid property for type 'IntrinsicAttributes & MapContainerProps' in Leaflet"

Currently faced with an issue while trying to incorporate a basic map into my application. Utilizing the React Leaflet sample code below, I encountered this error: import React from "react"; import { MapContainer, TileLayer, Marker, Popup } from ...

typescriptleafletreact-typescript

Assigning variables within Redux saga generators/sagas

Consider this scenario: function* mySaga(){ const x = yield call(getX) } The value of const x is not determined directly by the return value of call(getX()). Instead, it depends on what is passed in mySaga.next(whatever) when it is invoked. One might a ...

typescriptgeneratorredux-saga