Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

AEM VueJS integration - Pass multiple props

Avatar

Level 2

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

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @Cross_Leaf 

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!

View solution in original post

4 Replies

Avatar

Community Advisor

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

Avatar

Correct answer by
Community Advisor

Hi @Cross_Leaf 

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!

Avatar

Level 2

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