Helpful Tip for Dynamic Data in AnyMod w/ Vue

Here is a tip for anyone using mods that use Vue

(TL;DR Configure custom delimiters for Vue when also using Handlebars.)

For the last few hours I've been having an issue with a form component I was trying to use. I had it blocking the the form submission with incorrect emails but I noticed it would not display the alert text value that was generated with Vue.

After too many failed attempts of getting my data to render I discovered that if I turned off Handlebars for the template and just used the plain HTML option it worked. I then realized that there was a conflict with Vue and Handlebars when rendering the data.

In order to get the results I wanted while still using Handlebars I had to overwrite the default delimiters that Vue uses. I did this by using the following property on my Vue instance: delimiters: ['${', '}']

With new delimiters assigned I updated my template to reflect the change and my data from Vue now works along side the data from Handlebars.

I checked here and didn't see anything so I just wanted to add this to the community in case someone else was having this issue

2 Likes

Oh great tip. Thank you for sharing !!

1 Like