Vue.js 模板上的 PhpStorm 未解析变量

问题描述

我有一个名为 Products 的对象，它是另一个名为 List 的对象的参数。

然后我循环遍历Vue.js模板部分中的products对象，IDE总是显示它看不到任何products参数。它看起来像这样：

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

在这种情况下，IDE 无法解析 id 和 title。

list 变量初始化如下：

private list: ListData = this.listData;

ListData 接口：

interface ListData {
  products: Products
}

产品界面：

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

产品界面：

interface Product {
  id: number
  title: string
}

tsconfig.json 文件：

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

整个组件看起来像这样：

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

  private list: ListData = this.listData;
}

我将 listData 设置为一个新的列表变量，因为我需要改变其中的数据，而且我不能直接改变 prop。但即使我直接在模板中使用 listData 变量 - IDE 仍然看不到它的属性。当然安装了 Vue.js 插件。

所以问题是 IDE 显示 list.products 变量未解析。相反，它应该直接进入产品界面。

解决方法

请投票给WEB-50459，以便在此票的任何进展情况下收到通知

vue.js webstorm webstorm