Skip to content

Computed value does not update when data updates #2071

Open
@AniaKru95

Description

@AniaKru95

Subject of the issue

I change data values to display some chunk of template.
This chunks depend on computed property, but it never change.

Steps to reproduce

Template:

  <apexchart v-if="isSingleChartActive"
             type="bar"
             height="700px"
             :options="columnChartOpts"
             :series="columnChartSeries"/>

Computed variable

const isSingleChartActive = computed(() => columnChartSeries.length !== 0 && props.isSingleChart)

Prop variable

const props = withDefaults(defineProps<Props>(), {
    isSingleChart: true
})

Data variable

const columnChartSeries = reactive([])

Expected behaviour

Computed value should also change

Actual behaviour

it('should display single chart2', async () => {
    const wrapper = await mount(MyChart,
        {
            propsData: {
                isSingleChart: true,
            },
            global: {
                stubs: {
                    apexchart: true
                }
            }
        })
    expect(wrapper.find("apexchart-stub").exists()).toBeFalsy() //true
    wrapper.vm.columnChartSeries = [{
        name: "dummy",
        data: [{"10:00": 25}],
        system: "pod"
    }]
    await nextTick()
    console.log(wrapper.vm.columnChartSeries.length !== 0)    //true
    console.log(wrapper.vm.isSingleChart)    //true
    console.log(wrapper.vm.isSingleChartActive)    //false

    expect(wrapper.find("apexchart-stub").exists()).toBeTruthy()
})

isSingleChartActive should be also true!

I've tried to setTimeout, but does not work.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions