Using the decorator in VueJS Typescript allows you to easily define dynamic computed properties

On my hands is a component structured like this:

@Component({
    computed: {
        [this.stateModel]: {
            get() {
                return this.$store[this.stateModel];
            }
        }
    }
})
class Component extends Vue{
    @Prop({ default: '' }) private stateModel!: string;
}

I want to bind stateModel as a property while utilizing this component. This property should be a state field and needs to be injectable into the component. The issue arises when TypeScript throws an error stating:

Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.

I attempted to create an interface and designate it as computed, but that approach failed to resolve the error.

Your assistance on this matter would be greatly appreciated.

Answer №1

While attempting to utilize the this keyword within a computed property, I encountered two distinct errors.

The usage of 'this' is prohibited in a computed property name

'this' is automatically assigned the type 'any' due to the lack of a type annotation

As an alternative approach, consider implementing a watcher instead

import { Watch } from 'vue-property-decorator';

@Component
class Component extends Vue{
    ...

    @Watch('stateModel')
    stateModelHasChanged(newValue: number) {
      this.stateModel = this.$store[this.stateModel];
    }
    ...

}

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

Convert JSON data to an array using Observable

My current task involves parsing JSON Data from an API and organizing it into separate arrays. The data is structured as follows: [ {"MONTH":9,"YEAR":2015,"SUMAMT":0}, {"MONTH":10,"YEAR":2015,"SUMAMT":11446.5}, {"MONTH":11,"YEAR":2015,"SUMAMT":5392 ...

Accessing `this.$refs`, `this.$router`, and `this.$route` using the Vue 2 Composition API

Is there a way to access this.$refs, this.$router, and this.$route in the setup function of Vue 2 Composition API? I've seen suggestions using context.$root, but it appears that $root is no longer accessible with context. Any guidance on this issue wo ...

When Vue.js Vuex state changes, the template with v-if does not automatically refresh

I have tried setting the v-if value in computed, data, passing it as props, and directly referencing state, but it never seems to re-render despite the fact that the state I am checking for is changed to true. Currently, I am directly referencing the stor ...

What are the steps to resolve the "EADDRINUSE: address already in use :::3000" error in an integration test?

While testing my simple endpoint using jest and superTest in my TypeScript project, I encountered the listen EADDRINUSE: address already in use :::3000 error. The file app.ts is responsible for handling express functionalities and it is the one being impo ...

Error message from OpenAI GPT-3 API: "openai.completions function not found"

I encountered an issue while trying to execute the test code from a tutorial on building a chat app with GPT-3, ReactJS, and Next.js. The error message I received was: TypeError: openai.completions is not a function This occurred when running the follow ...

What is the best way to choose an element within a component's template?

Is there a way to access an element that is defined in a component template? While Polymer has the $ and $$ to make this task simple, I am curious about how it can be done in Angular. Consider the example provided in the tutorial: import {Component} from ...

Utilizing an AwsCustomResource in AWS CDK to access JSON values from a parameter store

I found a solution on Stack Overflow to access configurations stored in an AWS parameter. The implementation involves using the code snippet below: export class SSMParameterReader extends AwsCustomResource { constructor(scope: Construct, name: string, pr ...

Tips for fixing the TS2345 compilation error when working with React

Attempting to implement the setState method in React has resulted in a compile error. Any solutions to this issue would be greatly appreciated. Frontend: react/typescript articleApi.tsx import axios from 'axios'; import {Article} from '../ ...

Error TS2322: Type 'Partial<T>' is not assignable to type 'T'

I'm struggling to articulate my problem, so I think the best way to convey it is through a minimal example. Take a look below: type Result = { prop1: { val1: number, val2: string }, prop2: { val1: number } }; f ...

Is it possible to ensure that all values from a specific type are represented in an enum collection?

I have a Prisma enum that I've defined (not in TypeScript), and I'm curious if it's possible to synchronize a TypeScript String enum with the generated Type from the Prisma Client. Here are the key details: export const GroupInvitationSta ...

The NestJs project fails to display the updates when using the "tsc" command before running either "npm run start" or "npm run start:dev"

As a beginner in nestjs, I decided to start a tutorial to learn more about it. However, whenever I make updates or changes to my code, I don't see any changes reflected in the results. Can someone please assist me with this issue? Below are my tsconfi ...

Why is the lifecycle callback not being triggered?

I am currently learning how to develop with Vue.js. I have been trying to use the lifecycle callbacks in my code. In my App.vue file, I have implemented the onMounted callback. However, when I run the code, I do not see the message appearing in the consol ...

Fastest method to invoke a potentially undefined function

With a background in C#, I am familiar with the null-conditional operator which allows you to call a function while avoiding a potential null-reference exception like this: Func<int> someFunc = null; int? someInteger = someFunc?.Invoke(); // someInte ...

Exploring the mechanics behind ES6 Map shims

From what I've gathered from the documentation (here and here), it seems that having a reference to the memory address is necessary for the operation to work: const foo = {}; const map = new Map(); map.set(foo,'123'); // This action requi ...

Upgrading to TypeScript: How to resolve issues with const declarations causing errors in JavaScript style code?

Currently, I am in the process of migrating a decently sized project from JavaScript to TypeScript. My strategy involves renaming the .js files to .ts files, starting with smaller examples before tackling the larger codebase. The existing JavaScript code i ...

Error message 'Module not found' occurring while utilizing dynamic import

After removing CRA and setting up webpack/babel manually, I've encountered issues with dynamic imports. The following code snippet works: import("./" + "CloudIcon" + ".svg") .then(file => { console.log(file); }) However, this snip ...

Exploring the methods for monitoring multiple UDP ports on a single address in Node.js within a single process

I am currently working on developing a Node.js application to manage a small drone. The SDK provides the following instructions: To establish a connection between the Tello and a PC, Mac, or mobile device, use Wi-Fi. Sending Commands & Receiving Responses ...

Manipulating objects from an HTTP Observable while iterating through an Array of objects

I am currently working on processing each element of an array by making a separate HTTP call for each element. I need to track the status of each call and update the UI once all calls are completed. The code snippet below demonstrates my current approach: ...

Unexpected behavior with Node js event listener

I am currently working on emitting and listening to specific events on different typescript classes. The first event is being listened to properly on the other class, but when I try to emit another event after a timeout of 10 seconds, it seems like the lis ...

Vue.js - display additional items in an array with matching titles

I am working with an array of objects, examples include: [{ title: 'foo' id: 1, name: 'anne' }, { title: 'example', id: 2, name: 'anne' }, { title: 'ex', id: 3, name: &a ...