Struggling to retrieve the 'this' object using a dynamic string

Question

Struggling to retrieve the 'this' object using a dynamic string

Within my Nuxt + TS App, I have a method that attempts to call a function:

nextPage(paginationName: string): void {
      this[`${paginationName}Data`].pagination
        .nextPage()
        .then((newPage: number) => {
          this.getData(paginationName, newPage);
        });
    },

I am trying to access my computed property using 'this', but the compiler is throwing an error stating

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type

. While using @ts-ignore resolves the issue, I want to find a better solution. Here is the computed property in question:

soonData(): ISoonData {
      const soonData = this.$store.getters['soonData'];
      const pagination = new Pagination(
        Number(soonData.currentPage),
        soonData.maxPage
      );
      return new soonData(soonData, pagination, 'soon');
    },

My components are declared using Options-api with export default Vue.extend({})

typescript vue.js nuxt.js

Answer 1

Answer №1

I managed to figure it out by replacing the context as such:

let _self: any 

export default Vue.extend({
...

methods: {
  nextPage(paginationName: string): void {
  _self[`${paginationName}Data`].pagination
    .nextPage()
    .then((newPage: number) => {
      this.getData(paginationName, newPage);
    });
},
}
...
created () {
  _self=this
}

})

Answer 2

I managed to figure it out by replacing the context as such:

let _self: any 

export default Vue.extend({
...

methods: {
  nextPage(paginationName: string): void {
  _self[`${paginationName}Data`].pagination
    .nextPage()
    .then((newPage: number) => {
      this.getData(paginationName, newPage);
    });
},
}
...
created () {
  _self=this
}

})

Struggling to retrieve the 'this' object using a dynamic string

Answer №1

Similar questions

Getting the item that was clicked on a Chart in a PrimeNG chart within an Angular application can be achieved by following these

The property you are trying to access is not defined on the enum type in Types

Can anyone explain why the Splice function is removing the element at index 1 instead of index 0 as I specified?

Securing access with Vue.js authentication even if the URL is entered manually

Error message "Property 'name' does not exist on type '{}'" is encountered when using Ionic/Angular HttpClient and no data type is specified

Accessing information necessitates two separate subscriptions

Launching a new tab with a specific URL using React

Exploring the capabilities of AWS Cognito with Vue.js

"Encountered a type error with the authorization from the credentials provider

Is it feasible to append an element to the result of a function that returns an array?

Unable to execute a join operation in TypeScript

What is the process for integrating MongoDB into Vue.js 2?

Exploring the world of HTTP PUT requests in Angular 4.0

How can I dynamically replace a specific element inside a .map() function with a custom component when the state updates, without replacing all elements at once?

Styling of Bootstrap HTML element not appearing as expected

Managing onChange in a ReactJs project

Issue with esbuild not executing within docker compose configuration

An error of type TypeError has been encountered due to an invalid argument type. This occurred in the file located at {mypath}Desktop eddit ode_modules@redisclientdistlibclientRESP2encoder.js on line

Mastering the Art of Utilizing Emit and Props in the Nuxt3 Composition Api

using vuejs to pass a function as a prop