How to display toStructure fields in a custom block

Hey there

I am looking for a way to display a toStructure field in a custom block.
This is where I am stuck:
yml:

name: Expanding Box
icon: server
  content:
    fields:
      inhalt:
        type: structure
        fields:
          h3:
            type: text
          text:
            type: textarea

Extention js:

panel.plugin("ab-magazin/expandbox", {
blocks: {
expandboxblock: `
<div class="expandbox">
  <template v-for="content.inhalt">
    <h3>
    {{ content.inhalt.h3 }}
    </h3>
    <p>
    {{ content.inhalt.text }}
    </p>
</div>
`
}
});

I am not that familiar with the vue syntax, so i think there is the mistake somewhere. Basically i thought i have to find the equivalent to <?php foreach>.
I found this, where somthing similar is discussed. I tried to implement it, as you see above.

Would be happy for any help here.

The source code for the table block should help:

Ok I am trying, but I don’t really get what this repro is about.
I forged it, but it seems not to be a normal kirby installation, or is it?

So is column the field name like in my yml »inhalt«?
And what is columnName?
What does :key do?

I guess I could work with the link, when I could find the corresponding yml.

Ok, still lost. :sweat_smile:
I thought I could figure it out on my own…

Where is this coming from: v-for="(row, rowIndex)? (line20)
Continuing with: in rows I guessed it is looking for row and rowIndex in the fields of rows… but there are no such fields in rows.

Assuming so, I tried to use in inhalt or in fields but that throws an error, that its not defined.

In my blockfactory cookbook recipe, you can find another example:

Thanks for pointing to that cookbook artikel. Now I got it!

I am just figuring out how those blocks work to dive a bit deeper into kirby. Started here:

Maybe you could link your cookbook article here too? Thanks again for the great dokumentation!

Done!

1 Like