过滤的对象数组，nuxt，vue js答案

【问题标题】：filtered array of objects, nuxt, vue js过滤的对象数组，nuxt，vue js
【发布时间】：2020-01-02 10:49:42
【问题描述】：

我需要根据对象中某个键的值来过滤一个数组，但是我得到一个错误：

Property 'sort' does not exist on type 'Object'

我预计如果panel.sort 是true，则将呈现数组worktop。否则，将呈现数组groupA。

我做错了什么？为什么我的sort 键不可见？

export default class PanelSettings extends Vue {
  panels: Array < Object > = [{
      id: 0,
      name: "one",
      sort: true
    },
    {
      id: 1,
      name: "two",
      sort: true
    },
    {
      id: 2,
      name: "three",
      sort: true
    },
    {
      id: 3,
      name: "four",
      sort: true
    },
    {
      id: 4,
      name: "five",
      sort: true
    },
    {
      id: 5,
      name: "six",
      sort: true
    },
    {
      id: 6,
      name: "seven",
      sort: false
    },
    {
      id: 7,
      name: "eight",
      sort: false
    },
    {
      id: 8,
      name: "nine",
      sort: false
    },
    {
      id: 9,
      name: "ten",
      sort: false
    },
    {
      id: 10,
      name: "eleven",
      sort: false
    }
  ];

  get worktop() {
    return this.panels.filter(function(panel) {
      return panel.sort == true;
    });
  };
  get groupA() {
    return this.panels.filter(function(panel) {
      return panel.sort == false;
    });
  };

}

<ul>
  <li v-for="panel in worktop" :key="panel.id" class="mb-3 mr-8">
    <div>
      <tw-pannel class="text-danger button">
        <tw-icon name="minus" />
        <span>{{panel.name}}</span>
      </tw-pannel>
    </div>
  </li>
</ul>
<ul>
  <li v-for="panel in groupA" :key="panel.id" class="mb-3 mr-8">
    <div>
      <tw-pannel class="text-primary">
        <tw-icon name="plus" />
        <span>{{panel.name}}</span>
      </tw-pannel>
    </div>
  </li>
</ul>

【问题讨论】：

标签： arrays typescript vue.js

【解决方案1】：

根据docs，您不应使用Object 类型，而应使用object。但即便如此，sort 也不是object 的属性，因为javascript 的Object 没有sort 的属性。

创建接口或类型别名（参见differences）并使用它代替Object

interface MyPanelObject {
    id: number,
    name: string,
    sort: boolean
}

/*OR:*/

type MyPanelObject = {
    id: number,
    name: string,
    sort: boolean
}

/* change this line: */
panels: Array<MyPanelObject> = [/*panels*/];

【讨论】：

感谢您的回答！但我得到一个错误：1）属性或方法“panelPlace”未在实例上定义，但在渲染期间被引用。，，2）`TypeError：_vm.panelPlace不是函数`
什么是panelPlace？这是添加到每个 panel 对象的某些方法吗？我在你的代码中看不到它。
哦，对不起！！！！是的，我没有删除这个方法。但是，尽管如此，界面还是不起作用。

【解决方案2】：

虽然您可以为panels 声明正确的类型注释，但在您的特定用例中实际上并不需要它（至少从问题中显示的内容来看）。

您可以简单地删除类型注释，并允许 TypeScript 推断数组类型而不会失去类型安全性：

【讨论】：