This page has an error - lightning inputs

Question

I'm making a component that renders filters based on any sObjects, to render records based on those filters. The component renders, depending on the type of the filter (boolean, number, with options) a different type of lightning component (input, combobox, custom multi select). The parent controller receives, via apex, the filters. Those filters are passed to a child component that iterates over them, and for each one, renders another child component which has the logic for what to render. Here is the code of the last child component:

import { LightningElement, api } from 'lwc';
export default class LwcFilter extends LightningElement {
@api filter;

get isBoolean(){
    return this.filter.type === 'boolean';
}

get isInput(){
    return this.filter.type === 'string' || this.filter.type === 'number';
}

get isSelect(){
    return this.filter.type === 'options';
}

get isMultiSelect(){
    return this.filter.type === 'options-multiple';
}

get isComposable(){
    return this.filter.type === 'composable';
}

get composableSelectFilter(){
    if(this.filter.type === 'composable'){
        return this.filter.filters[0];
    }
}

get composableSecondFilter(){
    if(this.filter.type === 'composable'){
        return this.filter.filters[1];
    }
}

handleOnChange(event){
    const selected = event.detail.value;
    this.filter.value = selected;
}

getValue(event){
    const selected = event.target.value;
    this.filter.value = selected;
}

}

Html:

<template>
<template if:true={filter}>
    <div>
        <lightning-input
            if:true={isInput}
            type={filter.type}
            label={filter.label}
            onchange={getValue}>
        </lightning-input>
        <lightning-input
            if:true={isBoolean}
            type={filter.type}
            label={filter.label}
            onchange={getValue}>
        </lightning-input>
        <lightning-combobox
            if:true={isSelect}
            label={filter.label}
            options={filter.options}
            onchange={handleOnChange}>
        </lightning-combobox>
        <c-multi-select
            onchange={handleOnChange}
            if:true={isMultiSelect}
            label={filter.label}
            options={filter.options}>
        </c-multi-select>
        <template if:true={isComposable}>
            <lightning-combobox
                options={composableSelectFilter.options}
                label={composableSecondFilter.label}>
            </lightning-combobox>
            <c-lwc-filter
                filter={composableSecondFilter}>
            </c-lwc-filter>
        </template>
    </div>
</template>
<!-- <template if:false={filter}>
    <p>error</p>
</template> -->

In the playground, the filters render correctly, but when I type anything in any of the inputs, salesforce throws an error, and in the 'technical stuff' section, it says 'script error' in the lightning input js. What could it be? Is it something on my code?

PD: how do I choose between the event.detail or event.target in the onchange handlers?

Answer 1

Someone helped me by telling me to create a setter and use rest parameters to make a mutable copy of the filter received by the parent component, this solved it:

_filter; @api set filter(value) { this._filter = {...value}; } get filter(value) { return this._filter; }