Any way to use v-mark within a v-click/s?

[ckpearson]

If I have something like the following:

<v-clicks>

- Item 1 - <v-mark>I want this to underline</v-mark>

</v-clicks>

I would expect this to work, except it doesn't. The mark is rendered immediately.

[KermanX]

Because of vuejs/core#10295, relative position for nested click elements is not supported. You can use the at prop to specify when the animation triggers manually:

<v-clicks>

- Item 1 - <span v-mark="2">I want this to underline</span>

</v-clicks>

[ckpearson]

That's useful, except now the mark is animating at the same time as the next item in the list, is there any way to delay the next item in the v-clicks container without having to resort to wrapping each item in their own v-click blocks?

[KermanX]

Hmmm, how about VSwitch (https://sli.dev/builtin/components#vswitch)?

<v-switch>
  <template #1> Point 1 </template>
  <template #2-3> Point 2. <span v-mark="3"> Mark this</span> </template>
  <template #4> Point 3 </template>
</v-switch>

[ckpearson]

Ah, that looks like it'd probably do the trick. Am I correct in thinking the behaviour within Vue is the reason click positioning has to be specified explicitly? Any plans to eventually have it all automatically inferred relatively, as that would be super useful, especially when moving content around during edits.