AEM VueJS integration - Pass multiple props

[_CL]

hi folks,

I am following below blog for integrating AEM with VueJS -

https://medium.com/@jlanssie/use-vue-js-in-adobe-experience-manager-59bc7e098efd

The blog talks about passing value from dialog via Sightly to VueJS as props as seen below -

Create an HTL template demovue.html at ui.apps/src/main/content/jcr_root/apps/wknd/components/demovue/demovue.html

<vue-component data-component="demo" data-message="${properties.text}"></vue-component>

However, I want to pass multiple values to the vue component.

How can I do so?

thanks,

ronnie

[Umesh_Thakur]

you should first create a json for all the property and use that json in the sightly like below:

INside sling model:

"private String jsonDataGenerator()

{

Map<String, Object> props = new HashMap<String,Object>();

props.put("title", this.getTitle());

props.put("description", this.getDescription());

props.put("ctalabel", this.getCtaLabel());

props.put("ctalink", this.getCtaLink());

try {

return String.format("{\"%s\":%s}",

new ObjectMapper().writeValueAsString(needAdviceProps));

} catch (JsonProcessingException e) {

log.error("Unable to generate dataLayer JSON string", e);

}

}"

in sightly right somethng like :

<sly data-sly-use.demoModel="com.mysite.aem.models.DemoModel">
</sly>
<vue-component data-component="demo" data-message="${demoModel.data}"></vue-component>

Hope this helps
Umesh Thakur

[_CL]

how would ${demoModel.data} map to props here?

[Rohan_Garg · Accepted solution]

Hi @_CL 

You can tag multiple props by adding multiple "data-" attributes as shown below - 

<vue-component data-component="demo" data-message1="${properties.text1}" data-message2="${properties.text2}"></vue-component>

In your .vue file you can access it as below - 

this.$attrs  // access all data-* attributes

Alternatively you can also use the below syntax -

this.$el.getAttribute('message1')

Alternatively, you can also bind the dialog values to sling model and expose the object as suggested by @Umesh_Thakur 

Hope this helps!

[_CL]

Kudos! The last syntax worked for me, any drawback of using this approach over the sling model way you suggested?