Add declaration for dervied values in templates #845

Sdju · 2024-10-23T08:58:42Z

Sdju
Oct 23, 2024

Use cases:

Processing values inside scoped slots
Processing values inside v-for (without creating a computed property for values)

Pros:

Simple
Handy

Cons:

More logic inside templates

Current solutions and their limitations:

Create a computed property (impossible for values inside scoped slots)
Create methods for processing values. unoptimized (e.g., when processing the same value multiple times)
Use :set / :data-set hack - it's a hack and doesn't work for Vapor (currently)
Create a simple utility component - while this is currently the best option, it requires recreating the component each time

Given these limitations, I think we need a way to create derived values inside templates and Vue Macros seems like the perfect place to test this feature.

Proposed syntax:
We already have a similar syntax for scoped params, so I suggest something similar:

<div  v-let="{ a = msg + '!', b = msg + '?' }">
  {{ a }} {{ b }}
</div>

// OR

<div  v-const="{ a: msg + '!', b: msg + '?' }">
  {{ a }} {{ b }}
</div>

Thank you

sxzz · 2024-10-29T13:15:06Z

sxzz
Oct 29, 2024
Maintainer

It seems { a = msg + '!', b = msg + '?' } is not a valid JS expression.
Are there any differences with the v-scope RFC?

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Add declaration for dervied values in templates #845

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Add declaration for dervied values in templates #845

Uh oh!

Sdju Oct 23, 2024

Replies: 1 comment

Uh oh!

sxzz Oct 29, 2024 Maintainer

Sdju
Oct 23, 2024

sxzz
Oct 29, 2024
Maintainer