Custom block preview plugin: Problem with v-for

[Stefan741]

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) {
                    console.log(item);
                    return item;
                },
            },
            computed: {},
            updated() {},
            beforeMount() {
                console.log(this.content.accordion);
            },
            template: ` <template>
                            <div v-for="item in content.accordion">
                                {{item.title}}
                            </div>
                        </template>`,
        },
    },
});

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

Any help is appreciated!

Regards,

Stefan

[pixelijn]

v-for always needs a key…

[Stefan741]

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

[Stefan741]

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>
                <div v-for="item in content.accordion">
                    {{item.title}}
                </div>
            </div>`,