Help with creating computed elements in Vue 3

Hi, I'm switching over to Vue 3 script setup method but I'm struggling with creating computed elements. When I try to convert my old code to the new way I get undefined. Is there some obvious mistake I'm making here?

computed: {
        bookingCriteria() {
            return JSON.parse(sessionStorage.getItem("bookingCriteria"));
        },
        checkedPackages: function () {
            return _.filter(this.packages, (v) =>
                _.includes(this.booking.checkedPackages, v.id)
            );
        },
        checkedInsurances: function () {
            return _.filter(this.insurances, (v) =>
                _.includes(this.booking.checkedInsurances, v.id)
            );
        },
        checkedExtras: function () {
            return _.filter(this.extras, (v) =>
                _.includes(this.booking.checkedExtras, v.id)
            );
        },
    },

This is what I have been trying:

const bookingCriteria = computed(() =>
    JSON.parse(sessionStorage.getItem("bookingCriteria"))
);

let checkedPackages = computed(() => {
    _.filter(props.packages, (v) => _.includes(form.checkedPackages, v.id));
});

let checkedInsurances = computed(() => {
    _.filter(props.insurances, (v) => _.includes(form.checkedInsurances, v.id));
});

let checkedExtras = computed(() => {
    _.filter(props.extras, (v) => _.includes(form.checkedExtras, v.id));
});

hjortur17

3 years ago

Best Answer

Level 14

I was able to figure out some way. Not sure if it's the correct one but it works.

let checkedPackages = computed({
    get() {
        return _.filter(props.packages, (v) =>
            _.includes(form.checkedPackages, v.id)
        );
    },
    set() {
        return _.filter(props.packages, (v) =>
            _.includes(form.checkedPackages, v.id)
        );
    },
});

let checkedInsurances = computed({
    get() {
        return _.filter(props.insurances, (v) =>
            _.includes(form.checkedInsurances, v.id)
        );
    },
    set() {
        return _.filter(props.insurances, (v) =>
            _.includes(form.checkedInsurances, v.id)
        );
    },
});

let checkedExtras = computed({
    get() {
        return _.filter(props.extras, (v) =>
            _.includes(form.checkedExtras, v.id)
        );
    },
    set() {
        return _.filter(props.extras, (v) =>
            _.includes(form.checkedExtras, v.id)
        );
    },
});

darisnstlex

3 years ago

Level 1

the function in computed expect to return value, no need for getter/setter if you don't plan to assign value to it

const checkedExtras = computed(() => _.filter(props.extras, (v) => _.includes(form.checkedExtras, v.id)));

Please or to participate in this conversation.