AEM VueJS integration - Pass multiple props | Community
Skip to main content
NageshRaja
NageshRaja
Level 5
September 23, 2024
Solved

AEM VueJS integration - Pass multiple props

  • September 23, 2024
  • 2 replies
  • 1279 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Rohan_Garg

Hi @nageshraja 

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!

2 replies

Umesh_Thakur
Community Advisor
Umesh_ThakurCommunity Advisor
Community Advisor
September 23, 2024

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
    NageshRaja
    NageshRajaAuthor
    Level 5
    September 23, 2024

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

    Rohan_Garg
    Community Advisor
    Rohan_GargCommunity AdvisorAccepted solution
    Community Advisor
    September 23, 2024

    Hi @nageshraja 

    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!

      NageshRaja
      NageshRajaAuthor
      Level 5
      September 23, 2024

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

      Terms & ConditionsAccessibility statement

      Loading footer...