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
Solved! Go to Solution.
Views
Replies
Total Likes
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!
you should first create a json for all the property and use that json in the sightly like below:
INside sling model:
<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
how would ${demoModel.data} map to props here?
Views
Replies
Total Likes
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!
Kudos! The last syntax worked for me, any drawback of using this approach over the sling model way you suggested?
Views
Replies
Total Likes
Views
Likes
Replies