Custom block preview plugin: Problem with v-for

Hi all

Just started creating a block preview plugin for an accordion. I store the accordion content in a structure field. In the preview plugin, I loop over the structure field content with v-for and it returns the content in an array. So far so good.

However, for some tricky reason the curly braces {{item.title}} does not produce any output, although item.title shows the correct value in the console log.

Here’s my preview plugin:

panel.plugin("endloop/e-accordion", {
    blocks: {
        "e-accordion": {
            methods: {
                consoleLog(item) {
                    return item;
            computed: {},
            updated() {},
            beforeMount() {
            template: ` <template>
                            <div v-for="item in content.accordion">

Trying to output the title this way results in an empty dom:

If I console log the item content during the v-for loop, it contains the values as expected:

Somehow, I seem to miss something very basic here :grimacing:

Any help is appreciated!



v-for always needs a key…

Adding a key :key="item.title" does not help. The result stays the same :open_mouth:

I found the solution. I knew it was something simple: the required root element in the template was missing. After adding a root <div>, it works!

template: `
                <div v-for="item in content.accordion">