The computed value fails to identify the prop object

Question

The computed value fails to identify the prop object

I am trying to create a computed value that I can use in my view by following this documentation:

Within a component, I am sending an array object like this:

const tabs = ref([
      {
        imageSrc: '/programs/test1.png',
         ....
      },

In another component, I am receiving it like this:

export default defineComponent({
  name: 'ProgramModal',

  props: {
    tabs: {
      type: Array as PropType<Array<any>>,
      required: true,
    },
  },


  computed: {
    img() {
      return `./images/modal/${encodeURIComponent(this.tabs.imageSrc)}.png`
    },
  },

})

However, I am encountering two errors with the computed value. The first error states:

img implicitly has return type any because it does not have a return type annotation and is referenced directly or indirectly in one of its return expression

The second error says:

Property tabs does not exist on type { img(): any; }

Can anyone help me figure out what I am doing wrong? Thanks.

typescript vue.js vue-component vuejs3

Answer 1

Answer №1

There are a couple of issues you need to address:

The Options API for TypeScript has a known limitation that requires annotating return types on computed:

Due to the circular nature of Vue’s declaration files, TypeScript might struggle to infer types for certain methods. As a result, you may have to specify the return type for methods like render and those in computed.

Make sure to annotate the return type of img():
```
img(): string {
          👆
  return `...`
}
```
If you don't fix this issue, type inference for the component instance will be incorrect, causing the error message:
```
Property tabs does not exist on type { img(): any; }
```
.
One user pointed out in a removed answer that this.tabs is an array, but your computed property is trying to access imageSrc directly from the array instead of an element within the array. To access the imageSrc of the first element in the array, use square brackets with index zero (this.tabs[0].imageSrc):
```
return `./images/modal/${encodeURIComponent(this.tabs[0].imageSrc)}.png`
                                                      👆
```

Your revised code should resemble something like this:

export default defineComponent({
  computed: {
    img(): string {
      return `./images/modal/${encodeURIComponent(this.tabs[0].imageSrc)}.png`
    },
  },
})

Answer 2

There are a couple of issues you need to address:

The Options API for TypeScript has a known limitation that requires annotating return types on computed:

Due to the circular nature of Vue’s declaration files, TypeScript might struggle to infer types for certain methods. As a result, you may have to specify the return type for methods like render and those in computed.

Make sure to annotate the return type of img():
```
img(): string {
          👆
  return `...`
}
```
If you don't fix this issue, type inference for the component instance will be incorrect, causing the error message:
```
Property tabs does not exist on type { img(): any; }
```
.
One user pointed out in a removed answer that this.tabs is an array, but your computed property is trying to access imageSrc directly from the array instead of an element within the array. To access the imageSrc of the first element in the array, use square brackets with index zero (this.tabs[0].imageSrc):
```
return `./images/modal/${encodeURIComponent(this.tabs[0].imageSrc)}.png`
                                                      👆
```

Your revised code should resemble something like this:

export default defineComponent({
  computed: {
    img(): string {
      return `./images/modal/${encodeURIComponent(this.tabs[0].imageSrc)}.png`
    },
  },
})

The computed value fails to identify the prop object

Answer №1

Similar questions

Triggering an event in Angular 2 after ngFor loop completes

Encountering a runtime issue with socket.io when using typescript that has been bundled by

Having trouble locating variables in VueJS3 when using Axios and TypeScript?

ReactTS: Setting a default generic for dynamic components

How can I incorporate Vue draggable feature in my project using cards?

Leveraging the power of CSS calc() in combination with TailwindCSS styles and JavaScript

"Encountering difficulties while setting up an Angular project

In Laravel, the collection will consistently provide an object as opposed to an array

Is there a way to allocate a prop to data just once?

Utilizing External Store Module Getters/Actions/Mutations in Vuex 4 with TypeScript

Stop unwanted clicking on inactive buttons in Angular

Tips for verifying the presence of a specific value within an array of union types

Sharing data between parent and child components in a Vue dialog box

Exploring how to traverse a <router-outlet> within its container

Tips for displaying placeholder in cropper following an upload

Discovering potential types in Typescript through optional inference

Issue with bootstrap modal new line character not functioning properly

Incorporate a Font Awesome icon link within ReactJS for enhanced design and functionality

Vue with TypeScript encountering error: property does not exist on type

Create a typescript class object