Subscribe on changes!

Allow omit space around `of` in `v-for`

avatar
Aug 18th 2022

What problem does this feature solve?

v-for is similar to for..of/for..in loop in JavaScript.

In JavaScript, the following is valid

for (const{x}of[{x:1}])
    console.log(x)

But in Vue SFC, the following is NOT valid

<div v-for="{x} of[{x:'1'}]">{{ x }}</div>

the space around of can't be omitted. playground

Since in JavaScript it's fine to not add spaces around of, sometimes I don't write it, let Prettier to add space for me. Then I wrote the same in Vue SFC, it can't work.

Can we support it?

What does the proposed API look like?

N/A

avatar
Aug 22nd 2022

@LinusBorg hi. I am looking into making a PR for this. Would you say the fix for this lies in the const forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/ regex?

avatar
Aug 22nd 2022

The \s should be replaced with a RegExp allow all non-indentifier characters.

avatar
Aug 22nd 2022
v-for="{x} of[{x:'1'}]"

([\s\S]?)(?:in|of)([\s\S])

This regex would work. Let me look into making a PR image

avatar
Aug 31st 2022

The \s should be replaced with a RegExp allow all non-indentifier characters.

which of the /s ?