Invalid parenthesized assignment pattern

[sheremet-va]

Vue version

@bdffc14

Link to minimal reproduction

From VItest Ui

Minimal I can find (edit to trigger error)

Steps to reproduce

The error comes from this line:

<div v-for="({ file: efile, line, column }, i) of task.result.error.stacks" :key="i" class="op80 flex gap-x-2 items-center" data-testid="stack">

If I remove file: efile, then everything works. This bug is only reproducible in DEV.

What is expected?

No Error

What is actually happening?

Error: Invalid parenthesized assignment pattern

System Info

System:
    OS: macOS 12.4
    CPU: (8) arm64 Apple M1
    Memory: 92.08 MB / 8.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v16.13.2/bin/yarn
    npm: 8.5.3 - ~/.nvm/versions/node/v16.13.2/bin/npm
  Browsers:
    Chrome: 102.0.5005.61
    Firefox: 98.0.2
    Firefox Developer Edition: 102.0
    Safari: 15.5

Any additional comments?

The file comes from Vitest ui package.

Also, if you remove import from vue in the second minimal reproduction, it suddenly works 👀

[liulinboyi]

You can use like this😉.

<script setup lang="ts">
import { ref } from 'vue'
const stacks = ref([
{
  name: 'jack'
},{
  name: 'apple'
}
])
</script>

<template>
  <div v-for="{name: Name}, i of stacks">
    {{ Name }} {{  i }}
  </div>
</template>

Example

[kmohrf]

Interestingly parenthesis seem to be kind of optional even for iterations with index:

v-for="{ data: renamedData, level }, index in myList" works from the vue-side of things but trips my IDE as well as prettier and does not seem to be recommended by the official documentation.

v-for="({ data: renamedData, level }, index) in myList" on the other hand is gladly accepted by all other tooling but throws the error mentioned by @sheremet-va.

[zetaraku]

Would this be merged back into Vue 2.7?