How to filter an object by it's property based on another array and update the value?

I have a list of cards through the following data along with a switch control that updates the property selected to true

checklist: [
                    {
                        id: 1,
                        name: "Available Market",
                        selected: false,
                        description:
                            "List of markets available to franchise for current development."
                    },
                    {
                        id: 2,
                        name: "Passion",
                        selected: false,
                        description:
                            "A passion for technology and entertainment with a demonstrated ability to build a high performing team and/or organization."
                    },
                    {
                        id: 3,
                        name: "Experience",
                        selected: false,
                        description:
                            "A clear understanding of the retail industry and/or of child edutainment."
                    },
                    {
                        id: 4,
                        name: "Resources",
                        selected: false,
                        description:
                            "Adequate capital requirements (varies by market). In addition to the ability to purchase franchising licenses."
                    }
                ],

I would like to have a computed property that takes the checked items and cast it to an array

computed: {
            checkedResources: {
                get: function () {
                    let items = this.checklist.filter(item => item.selected === true)
                    return Object.keys(items).map(function (key) { return items[key].name; });
                },
                set: function(listItems) {
                    console.log(listItems);
                }
            }
        }

So the computed property has values like ["Experience","Resources"].

I'm displaying the computed properties in another place through a checkbox group and want to let people update the value of it through a setter function.

if I accept the setter value ["Experience","Resources","Passion"], how do I update the checklist object to to reflect the values accordingly (set selected to true)?

divanoli

8 years ago

Level 15

I think, I've figured it myself but not sure if this is the proper way of doing this.

computed: {
            checkedResources: {
                get: function () {
                    let items = this.checklist.filter(item => item.selected === true)
                    return Object.keys(items).map(function (key) { return items[key].name; });
                },
                set: function(listItems) {
                    console.log(listItems);
                    this.checklist.map(function(item) {
                        item.selected = listItems.includes(item.name)?true:false;
                        return item;
                    })
                }
            }
        }

Please correct me if I'm doing anything unusual.

Thank you

Please or to participate in this conversation.