vue.js - 通过 vue 中的计算属性过滤数据

Question

我尝试在对象的计算属性中添加过滤器。并期待对象的列表。

我已正确过滤数据，但无法从计算属性创建对象数组。

如果您能在这方面帮助我，我将不胜感激。

<div id="app">
  <div v-if="activeItems && activeItems.length > 0">
  {{ activeItems }}
      <ul>
        <li v-for="item in activeItems" :key="item.id">
          {{item.name}}
        </li>
      </ul>
  </div>
</div>

new Vue({
    el: '#app',
  data() {
    return {
        list: {
      "john" : true,
      "jane" : true,
      "lucy" : false
      },
      
    };
  },
  computed: {
    activeItems() {  
    return Object.keys(this.list)
             .filter(key => this.list[key] === true)
    /** expected 
      return `this.list` as an Array of object and filter by if active is true
          Expected output
          [
            {name: 'John', active: true},
            {name: 'Jane', active: true}
          ]
    **/
    
             
    }
  },
  mounted(){
    console.log(this.list);
  }
});

您可以在此链接上提供帮助https://jsfiddle.net/jakhodeM/we8t572z/6/

谢谢

Answer 1

return Object.keys(this.list)
        .filter(key => this.list[key] === true)
        .map(x => { return {'name': x, 'active': this.list[x]} });

https://jsfiddle.net/fowz746b/