How to render a List field with Vue (Blocks)

Kirby 3 Solved ✅
1

Hello!

I want to display a list – wich is part of a block – in the panel using Vue. The list is not supposed to be editable, so a “K-Input” unfortunately doesn’t help (unless I could disable wysiwyg completly). I have successfully managed to split a structure field with a “v-for” loop and display it in the panel but that does not work with a list. With my current Code I get an output where every character is in a single <li></li> Element.

My setup is more or less based on the cookbook for Kirby Blocks.
Thanks a lot for any help!

speciallist.yml

name: Special List
wysiwyg: false
content:
  fields:
    headline:
      label: Headline
      type: text
    facts:
      label: Facts
      type: list

speciallist.vue

<template>

    <div v-if="this.content" v-on:click="open">

        <div class="headline">
            {{ content.headline }}
        </div>

        <ul>
            <li v-for="fact in content.facts" :key="fact">
                {{ fact }}
            </li>
        </ul>

    </div>

</template>

<script>
    export default {
        name: 'Special List',
    }
</script>

Current Outcome

<
u
l
>
<
l
i
>
I
t
e
m
<
/
l
i
>
<
/
u
 l
>
2

Since it is a single item field, you would just output it in the same way as the headline field, i.e. without the loop and without the HTML markup. But I think since the field stores HTML (the list markup), you would have to render it inside a div with v-html

<div v-html="content.fact"></div>
1 Like
3

Thanks a lot! That worked perfect!