Vue.js multifield component

[Morar Ciprian]

Hello,

I've made a new component for a carousel feature.  The new yaml file I used in dialogs/components has the following layout(I have a multivalue field which contains composite elements made with text and pictures):

label: Carousel
form:
  properties:
    carousel:
      $type: jcrMultiField
      itemProvider:
        $type: currentItemProvider
      field:
        $type: compositeField
        itemProvider:
          $type: jcrChildNodeProvider
        properties:
          title:
            $type: textField
            label: Title
          image:
            label: Image
            $type: linkField
            chooser:
              workbenchChooser:
                appName: dam-chooser

The problem I encountered is the fact that in my vue component I didn't receive any props. How I can solve this? I tried to get carousel props and it is undefined.

Best regards,
Ciprian  

[Christopher Zimmermann]

Hi Ciprian,

I'm not sure - but you could as a first step verify that the content is saved as you expected by looking in the JCR Browser app. And then you could verify that the content is coming into your app via the REST endpoint. Easiest is to use the browser dev tools "Network" pane - then you can see the request to get the content - then you can inspect what is returned and verify that the content that you are expecting is in the response.

After that - you could create a page with only that one component (to simplify things) and then put a 'debugger' statement in your JS code and see if you can locate what is happening.

Good luck!

Cheers, Topher

--
You received this message because you are subscribed to the Google Groups "Magnolia User Mailing List" group.
To unsubscribe from this group and stop receiving emails from it, send an email to user-list+...@magnolia-cms.com.
To view this discussion on the web, visit https://groups.google.com/a/magnolia-cms.com/d/msgid/user-list/838cf5b8-e3fc-41cd-8b56-1a0927d1f40an%40magnolia-cms.com.

--

Best regards,

Christopher Zimmermann / Product Manager 
christopher...@magnolia-cms.com 

Skype: czimmermann_magnolia

Magnolia 
Oslo-Strasse 2, 4142 Münchenstein (Basel), Switzerland
Office: +41 61 228 90 00 www.magnolia-cms.com 
 

[Morar Ciprian]

Hi Cristopher,

Thank you for answer.

I was able to find in the request the props for carousel which comes in the form carousel0,carousel1,carousel2... My initial expectation was to find the props carousel as an array data type.

Best regards,

Ciprian

[Christopher Zimmermann]

OK - glad you found a solution.

You could look at the "nodes" array - it holds the name of each subnode- so you can iterate through that. 

We will improve the REST endpoint to support your expectation of the array.

Here is the ticket - you could follow it or vote on it in order to get an update once it is implemented. (Of course we will make it backwards compatible too!)

https://jira.magnolia-cms.com/browse/MGNLREST-161

[Bartosz Staryga]

Hey Ciprian,

You might wanna look at your carousel dialog too. the $type of your multi value field.
If you use $type: jcrMultiValueField this should save the data as you expected, under one prop and in array.

Cheers,
Bartosz

To view this discussion on the web, visit https://groups.google.com/a/magnolia-cms.com/d/msgid/user-list/0eb27e31-066a-4f0b-a8ee-c0cdb9e73e4dn%40magnolia-cms.com.

--

Best regards,

Bartosz Staryga / Front End Developer 
bartosz...@magnolia-cms.com 

Magnolia 
Oslo-Strasse 2, 4142 Münchenstein (Basel), Switzerland

Office: +41 61 228 90 00 www.magnolia-cms.com

 
 

[Morar Ciprian]

  Thanks Cristopher and Bartosz,

 My solution for the moment was to modifiy vue-editor and to add a new props named carousel which contains the array. 

I'm also waiting for the updates on the ticket https://jira.magnolia-cms.com/browse/MGNLREST-161

const props = {};
const metadata = {};

// console.log("createElement")
// console.log(node)
if(node['mgnl:template'] && node['mgnl:template'].includes("carousel")) {
props['carousel'] =[]
for(let item of node['@nodes']) {

props['carousel'].push(node[item])
}
}

Object.keys(node).forEach((key) => {
if (key.match(/^(@|mgnl:|jcr:)/)) {
metadata[key] = node[key];
} else {
props[key] = node[key];
}
});

props.metadata = metadata;

return props;

Best regards,

Ciprian