PhpStorm unresolved variable on Vue.js template

Question

I have an object called Products which is a parameter of another object called List.

Now then I loop through the products object in Vue.js template part, IDE always shows that it cannot see any products parameter. It looks like this:

<tbody v-if="list.products" v-for="product in list.products">
  <p>{{ product.id }}</p>
  <p>{{ product.title }}</p>
</tbody>

In this case id and title is unresolved by IDE.

list variable is initialized like this:

private list: ListData = this.listData;

ListData interface:

interface ListData {
  products: Products
}

Products interface:

interface Products {
  [index: number]: Product
  length: number
}

Product interface:

interface Product {
  id: number
  title: string
}

tsconfig.json file:

{
  "compileOnSave": false,
  "include": ["assets/**/*.ts"],
  "compilerOptions": {
    "allowJs": true,
    "module": "esnext",
    "target": "esnext",
    "strict": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "experimentalDecorators": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

The whole component looks like this:

@Component
export default class ProductsList {
  @Prop({ default: () => {} }) listData!: ListData

  private list: ListData = this.listData;
}

I set the listData as a new list variable because I need to mutate the data inside it, and I can't mutate the prop directly. But even if I use listData variable directly in the template - IDE still doesn't see it's properties. Of course the Vue.js plugin is installed.

So the problem is that IDE shows that list.products variables are unresolved. Instead, it should direct into the Product interface.

Answer 1

Please vote for WEB-50459 to be notified on any progress with this ticket