Hide HTML tags in panel preview of custom block

I have made a custom block which is a structure field. Within this there is a writer field.

After adding text content to the writer field, the preview in the panel includes the HTML tags, eg. <p>Example text</p>.

I understand that this question may fall a bit beyond Kirby and may solely be Vue related, but I was wondering if there is a way to output a representation of the fields contents in the panel which respects the HTML tags, however does not show them?

This is from my index.js file:

    <div @dblclick="open">
	        <details open v-for="item in content.accordion">
	        <summary v-if="item.summary">{{ item.summary }}</summary>
	        <summary v-else>Details</summary>
	        {{ item.details }} /////// THIS IS THE WRITER FIELD

Thanks a lot.

You can use a writer field in the Vue component. Have a look at the default text block’s Vue component: text | Kirby

    v-for="item in content.accordion"

This will probably not work but you get the idea.

Alternatively you can use the v-html attribute:

  <details v-for="item in content.accordion">
    <div v-html="item.details"></div>
1 Like

Thanks a lot @thguenther, I really appreciate the reply. Both worked with their individual nuances but for my particular case I found this worked the best: