Trying to do a block preview of a textarea field


I’m trying to preview some text:

{{ content.text }}

The output of this will be:

Lorem ipsum dolor sit amet: - My - List - Items

Instead of:

Lorem ipsum dolor sit amet:
- My
- List
- Items

The field “text” is a textarea.

If I do something like below the output is right, but I don’t want this to be editable inline. I just want to preview the textarea. Just as using the ->kirbytext() for templates.

  @input="update({ text: $event })"

i think your PHP needs to return the computed text property.

I’m having the exact same problem and don’t really understand what this means. How can I define what the PHP returns when calling the field from the Vue component?

I also tried something like
<div v-html="content.text" />
but it (unsurprisingly) also does not render HTML.

You need a custom API route that returns the rendered HTML, because the field value itself is just markdown.

Is this solved? How is it done?

I for my part gave up and worked around it. So unfortunately I never solved it.

As has already been mentioned, this needs a custom route, see also:

Or use the writer field for your blocks.