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

AEM VueJS integration - Pass multiple props

  • September 23, 2024
  • 2 replies
  • 1273 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

Rohan_Garg
Rohan_GargAccepted solution
New Participant
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
    New Participant
    September 23, 2024

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

    Umesh_Thakur
    Umesh_Thakur
    New Participant
    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
      New Participant
      September 23, 2024

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

      Terms & ConditionsAccessibility statement

      Loading footer...