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

Question

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

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

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

在这种情况下，id 和 title 未被 IDE 解析。

列表变量初始化如下：

private list: ListData = this.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 个变量未解决。相反，它应该直接进入产品界面。

Answer 1

请为 WEB-50459 投票，以便收到有关此票证的任何进展的通知

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

PhpStorm unresolved variable on Vue.js template

vue.js

phpstorm

webstorm