v-switch syntactic sugar

[toniengelhardt]

There are sometimes cases where you want to display different components/elements based on a state or variable. To handle this case you would usually do something like:

<div>
  <ComponentX v-if="type === 'a'" some-prop="somePropValue" />
  <ComponentY v-else-if="type === 'b'" another-prop="anotherPropValue" />
  <ComponentZ v-else-if="type === 'c'" yet-another-prop="yetAnotherPropValue" />
  <div v-else>
    <p>Nothing to see here...</p>
  </div>
</div>

Would be nice if this could be written like:

<div>
  <template v-switch="type">
    <ComponentX v-case="a" some-prop="somePropValue" />
    <ComponentY v-case="b" another-prop="anotherPropValue" />
    <ComponentZ v-case="c" yet-another-prop="yetAnotherPropValue" />
    <div v-default>
      <p>Nothing to see here...</p>
    </div>
  </template>
</div>

This could allow also cool things in more complex scenarios like:

<div>
  <template v-switch="type">
    <ComponentX v-case="a" some-prop="somePropValue" />
    <ComponentY v-case="b" another-prop="anotherPropValue" />
    <ComponentZ v-case="c" yet-another-prop="yetAnotherPropValue" />
    <div v-default>
      <p>Nothing to see here...</p>
    </div>
    <!-- Some content -->
    <ComponentFoo v-case="[a, b]" />
  </template>
</div>

Note that this would only be syntactic sugar to make the template more readable and OCD friendly, all the scenarios can also be handled with v-if, v-else-if, etc.

[KimYangOfCat]

why don't you use dynamic components in the case？

[toniengelhardt]

The props might be different and also it could be as simple as a span or smth like that for which you don't want to create an own component.