通过 vue 中的计算属性过滤数据答案

【问题标题】：filter data through computed property in vue通过 vue 中的计算属性过滤数据
【发布时间】：2022-01-07 10:55:55
【问题描述】：

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

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

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

<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/帮助这个链接

谢谢

【问题讨论】：

标签： vue.js vuejs3

【解决方案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/

【讨论】：

【解决方案2】：

通过删除 .name 属性来更新您的模板字符串。

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：