0👍
I have found the solution, and it actually turned out to be rather a simple oversight.
When I was using my Vue tag I was assigning the HTML attribute using double quotes, which were not being escaped in my json string. As such my tag would break, due to the extra double quote.
So changing from this <bbf-faqs data="<?= json_encode($stuff);?>"> to <bbf-faqs data='<?= json_encode($stuff);?>'> has solved it.
The other option, and probably more properly would be to escape the quotes in the json encode.
It’s also worth noting that if you use v-bind on the json being passed it, it will be automatically evaluated to an array, with no need for JSON.parse
The other issue with this approach to injection is that a prop is not data, so does not have any data binding.
I don’t think this is possible, so I’m going to use the dom variable approach
-1👍
Use JSON.parse() to convert your string into a JavaScript object.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse