Skip to content

Readonly reference to an array is not honored when inside v-for #13087

Open
@ahmadshahwan

Description

@ahmadshahwan

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNp9kdFPwjAQxv+VS1+ABIcEfcFBooYHfVCjvlljlu0Gxa1t2m6OLPvfvXYBITG89e779bvv2pbdah3VFbI5i21qhHZg0VV6yaUotTIOWjCYZEoWO+ggN6qEAfGDmxMgP9G45DJV0jpIld7B4uAwJHL40UIzhyl0n6MRuXAZT/rJNJMKh6UuEodUAcSZqKG+yJVZcFaCkMGRs2XbQhk1ZH0JXRdPCOv5zdRLYazvU+n9jzzZmDlL4XKxjrZWSVq89Tc5S1WpRYHmWTtB4TmbQ1C8lhSF+nkMPWcqHO/76QbT73/6W9v4HmcvBi2aGjk7aC4xa3S9vHp7wobOB7FUWVUQfUZ8RauKymfssbtKZhT7iAtpH8LvCLl+t6vGobT7pXxQT3aB54x+7P7M6n9xZ9FVuMdlR6/4VaPxnvSAs+g6ms5Y9wtIl8Jq

Steps to reproduce

Create a readonly reference to a reference of an array of objects.

const copy = readonly(ref([{ x: 1 }]));

In the template, iterate over the reference array using v-for, while attempting to modify the current element, for instance, inside a child component setup function or directly in the template as follows.

<div v-for="m in copy">{{ m.x = 0 }}</div>

What is expected?

Modification should be disallowed as the reference is a readonly one.

What is actually happening?

Modification is permitted. Data is mutated. No error or waring issued.

System Info

System:
    OS: Linux 5.15 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (22) x64 Intel(R) Core(TM) Ultra 9 185H
    Memory: 10.22 GB / 15.43 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 23.10.0 - /usr/local/bin/node
    npm: 10.9.2 - /usr/local/bin/npm

Any additional comments?

This observation only occurs when readonly() is passed a reference. It doesn't happend if the array is passed directly to readonly().

Metadata

Metadata

Assignees

No one assigned

    Labels

    🔨 p3-minor-bugPriority 3: this fixes a bug, but is an edge case that only affects very specific usage.regression

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions