Field plugin - v-for loop not working in vue component

Hello,

I’m trying to make a field plugin but the v-for loop isn’t working, neither for an array store in a prop nor for an array store in a data.

However, both arrays seems to be correctly stored according to the Vue devtools :

Here is the component that doesn’t render anything :

panel.plugin('bam/multigroups-field', {
    fields: {
        multigroups: {
            props: {
                groups: Array
            },
            data: function() {
                return {
                    arr: ['A', 'B']
                }
            },
            template: `
                <p v-for="item in arr" :key="item">
                    {{ item }}
                </p>
                <p v-for="group in groups" :key="group.name">
                    {{ group.name }}
                </p>
            `
        }
    }
})

Any idea ?

First we can test if the field is registered. Can you see the output you set the template like below?

template: "<p>Hello</p>"

Yes, it works

Not sure why but it works with k-field :slightly_smiling_face:

template: `
    <k-field v-bind="$attrs">
        <p v-for="item in arr" :key="item">
            {{ item }}
        </p>
        <p v-for="group in groups" :key="group.name">
            {{ group.name }}
        </p>
    </k-field>
`

My mistake ! I forgot an fundamental Vue js template rule : each template should have a maximum of one root element.
Indeed, it works with k-field but also with any other wrapper tag.

Thank you @ahmetbora

1 Like