How do I correctly pass section.blocks into a vue component?

[CodeThirtyTwo]

Hey!

I'm currently trying to pass the {{ section.blocks }} object into a vue component within my section-hero.liquid template file but I'm having trouble with it.

If I try < render-slider :slides="{{ section.blocks | json }}" > I get the "Json is not allowed on this object" error.
If I try < render-slider :slides="{{ section.blocks }}" > I get a simple 'ThemeDrop' string passed through.

Has anybody been able to do this?

[eduardocampo]

some sections are not valid, https://themelab.uicrooks.com/guide/troubleshooting.html#vue

Not all Drops can be converted to JSON though if you get an {"error":"json not allowed for this object"} you'll have to pass the values in question individually.

[CodeThirtyTwo]

Thanks for your response. I checked that link previously but it doesn't give me what I need. By doing that, it just passes in a String of ThemeBlockDrop or similar.

I need to be able to loop through the blocks in the Vue component.

[sergejcodes]

You can try using renderless components instead. You basically define your data, functions etc. in the vue component and pass them to the liquid template via v-slot. That way you don't need to pass any Shopify data to the component. Here is an example: vue file, liquid file