this.my_object.filter is not a function

Question

Here is the template (for simplicity I added only one button):

<button v-on:click="test()">Test</button>

The script:

export default {
  name: 'App',
  data: function() {
    return {
      boss_type: {
        prisoner: 'Some value',
        guardian: 'Some value',
        recidivist: 'Some value',
        moscow: 'Some value',
        secret: 'Some value',
        hospital: 'Some value'
      }
    }
  },
  methods: {
    test: function() {
        this.boss_type.filter((type) => {
          console.log(type);
        });
    }
  }
...

On click the error occurs: [Vue warn]: Error in v-on handler: "TypeError: this.boss_type.filter is not a function"

Please, help!

Answer 1

.filter() is a method of Array and boss_type is Object here. You can use Object.keys() which returns an Array from an Object input:

test: function() {
    Object.keys(this.boss_type).filter(key => {
      console.log("key: ", key);
      console.log("value: ", this.boss_type[key]);
    });
}