Как отфильтровать объект объектов с помощью вычислений, vuejs?

Question

Я обнаружил, что заполняю список с помощью 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
 }
}

Деталь в том, что указанный список должен быть отфильтрован через свойство «рекомендуемые». То есть я должен создать другой объект из объектов, но только с рекомендуемым свойством = 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;
                }
            }
        }
    },

Как бы эта функция была, большое спасибо

Answer 1

Во-первых, вам нужно преобразовать объект в массив, и для этого вы можете использовать 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)
        }
    }
}

Answer 2

Кажется, и массив объектов будет лучшим выбором для вашей структуры данных.

ES6 имеет метод Array.filter(), который делает именно то, что вы ищете, и с помощью Object.keys вы можете дажеиспользуйте его со своей структурой "объект объектов":

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

Answer 3

просто так:

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