Vuejs2 如何通过计算的vuejs过滤对象中的对象？

我发现自己用v-fordicha填充了一个列表，列表是由一个对象填充的

{
 id1:{
  descripcion: "Lorem ipsum dolor sit amet, consectetur adipisci"
  imagen: "https://source.unsplash.com/random"
  nivel: 1
  nombre: "Carpinteria"
  recomendada: true
 },
 idcat1: {
  descripcion: "Lorem ipsum dolor sit amet, consectetu"
  imagen: "https://source.unsplash.com/random"
  nivel: 1
  nombre: "Arquitectura"
  recomendada: false
 }
}

详细说明是，必须通过“推荐”属性筛选所述列表。也就是说，我必须创建另一个objects对象，但只创建推荐属性=true的对象

使用v-if直接在部件上执行此操作。但是我得到了一条消息，它最好使用一个计算返回对象，这个计算返回对象已经被过滤并移动那个对象

尝试以下操作，但无效：

computed:{
        categoriasFiltradas(){
            let vm = this;
            let newObj = {};
            for(let key in vm.listado_categorias){
                let obj = vm.listado_categorias[key];
                if(obj.recomendada == false){ 
                    //here you save the filtered object
                   return newObj[key] = obj;
                }
            }
        }
    },

该功能如何，非常感谢

就像这样：

computed:{
    categoriasFiltradas(){
        let vm = this;
        let newObj = {};
        for(let key in vm.listado_categorias){
            let obj = vm.listado_categorias[key];
            if(obj.recomendada === true){ 
               newObj[key] = obj
            }
        }
        return newObj
    }
},

---

在这里，对象和对象数组似乎是数据结构的更好选择

ES6有一个

Array.filter（）

方法，它可以精确地执行您要查找的内容，并使用

Object.keys

您甚至可以将它与“Object of objects”结构一起使用：

computed: {
  filtered() {
    return Object.keys(this.categories)
             .filter(key => this.categories[key].recommended === true)
  }
}

---

首先，您需要将对象转换为数组，为此您可以使用object.entries，但它仅在较新的浏览器中可用，对于较旧的浏览器，您可能需要添加以下多边形填充：

if (!Object.entries) {
    Object.entries = function (obj) {
        var ownProps = Object.keys(obj),
            i = ownProps.length,
            resArray = new Array(i); // preallocate the Array
        while (i--)
            resArray[i] = [ownProps[i], obj[ownProps[i]]];

        return resArray;
    };
}

然后创建计算属性并使用映射和过滤函数：

new Vue({
    data: function () {
        return {
            categories: {
                id1: {
                    descripcion: "Lorem ipsum dolor sit amet, consectetur adipisci",
                    imagen: "https://source.unsplash.com/random",
                    nivel: 1,
                    nombre: "Carpinteria",
                    recomendada: true
                },
                id2: {
                    descripcion: "Lorem ipsum dolor sit amet, consectetu",
                    imagen: "https://source.unsplash.com/random",
                    nivel: 1,
                    nombre: "Arquitectura",
                    recomendada: false
                }
            }
        }
    },

    computed: {
        filtered() {
            return Object.entries(this.categories)
                .map(item => item[1])
                .filter(item => item.recomendada == true)
        }
    }
}