filtered array of objects, nuxt, vue js

Question

I need to filter an array depending on the values of one of the keys in the object, but I get an error:

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

I expected that if panel.sort is true, the array worktop would be rendered. Otherwise, the array groupA would be rendered.

What am I doing wrong? Why is my sort key not visible?

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>

barbsan · Accepted Answer · 2019-08-29T09:42:34.673

0

According to the docs you shouldn't use Object type but object. But even then, sort is not a property of object, because javascript's Object has no property sort.

Create interface or type alias (see differences) and use it instead of 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*/];

edited Aug 29 '19 at 09:42

answered Aug 29 '19 at 09:24

barbsan

3,418
11
21
28

thanks for your answer! but I get an errors: 1) Property or method "panelPlace" is not defined on the instance but referenced during render., , 2) ` TypeError: _vm.panelPlace is not a function ` – Valdemar Aug 29 '19 at 12:06
What is `panelPlace`? Is this some method added to each `panel` object? I can't see it in your code. – barbsan Aug 29 '19 at 12:11
oh, i am apologize!!!!Yes, I did not delete this method. But, despite this, the interface does not work. – Valdemar Aug 29 '19 at 12:16

score 0 · Answer 2 · answered Aug 30 '19 at 05:09

While you could declare the proper type annotation for panels, you don't actually need it in your particular use case (at least from what's shown in the question).

You could simply remove the type annotation, and allow TypeScript to infer the array type without loss of type safety:

filtered array of objects, nuxt, vue js

2 Answers2