Skip to content

Can splice and push computed array even without setter? #6892

@imrim12

Description

@imrim12

Vue version

3.2.33

Link to minimal reproduction

https://codesandbox.io/s/can-push-splice-computed-array-reproduce-oi73jq?file=/src/App.vue

Steps to reproduce

I am able to use splice to remove element and push to add more element to the computed array without specifying any setter to it. I don't think this is the correct behavior of computed (without setter).

const list = ref([1, 2, 3, 4]);
// Or list of objects, both give the same effect: const list = ref([{ value: 1 }, { value: 2 }]);

const listComputed = computed(() => list.value);

listComputed.value = [] // Error (which is the correct behavior)

const removeItem = (index) => {
  listComputed.value.splice(index, 1);
};

const addItem = () => {
  listComputed.value.push(Math.random());
};

What is expected?

Computed array shouldn't change

What is actually happening?

Can use push or splice on computed array to change the value (even the referenced variable is changed)

System Info

No response

Any additional comments?

No response

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