Subscribe on changes!

Please add directives v-switch, v-case, v-break, v-continue

avatar
Dec 11th 2021

What problem does this feature solve?

Conditional rendering along complex, nested states very often becomes messy when we exclude the unneeded part of the template with lengthy v-if arguments. It would make the template shorter and clearer to comprehend if in addition to the current rendering path directives (v-if, v-else, and v-for) we could use a few additional ones like v-switch, v-case, v-break, v-continue.

What does the proposed API look like?

<v-break /> 1. to skip rendering all the rest of the template, for example if used within a v-if block it would allow allow shorter v-if arguments in the rest of the template with no need to exclude the invalid state 2. would exit rendering the template within the loop if used within a v-for block

<v-continue> to skip rendering the rest and begin a new iteration if used in v-for loop

 <div v-switch="state">      a switch case structure for conditional rendering

       <div v-case="one">...</div>`

       <div v-case="two">...</div>`

 </div>
avatar
Dec 12th 2021

In general, we will not consider major additions of new directives to Vue's template syntax unless it unlocks something that was not possible before.

In this case, the syntax really isn't fundamentally different from v-if/v-else-if/v-else chains, but the implementation complexity and introduced API surface is too large compared to the resulting benefits.