vue中通过computed 属性过滤数据

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/

你可以在这方面提供帮助 link

谢谢

Answer 1

通过删除 .name 属性.

更新您的模板字符串

        <li v-for="item in activeItems" :key="item.id">
          {{item}}
        </li>

为 activeItems 添加活动状态没有意义（因为它们始终处于活动状态）。

Answer 2

这是您的查询的解决方案。

 <template>
    <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>
</template>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                list: {
                    "john": true,
                    "jane": true,
                    "lucy": false
                },

            };
        },
        computed: {
            activeItems() {
                var arr=[];
                for (let key of Object.keys(this.list)) {
                    if (this.list[key]) {
                        arr.push({name: key, active: true})
                    }
                }
                return arr;
            }
        },
        mounted() {
            console.log(this.list);
        }
    });
</script>

Answer 3

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

https://jsfiddle.net/fowz746b/

vue中通过computed 属性过滤数据

filter data through computed property in vue

vue.js

vuejs3