Is it advisable passing some nonsensitive data to vue within an inline script?
HTML
<script>
var foo = <?php echo $foo ?>
</script>
Vue.js
new Vue({
data: {
foo: foo
}
});
-
2Yea this is fine, you could even just put the php echo directly in the Vue data. Make sure your variable isn't a common name though, global namespace and allJeff– Jeff2016-04-29 13:38:13 +00:00Commented Apr 29, 2016 at 13:38
Add a comment
|
2 Answers
This is probably a bit opinionated, but I'd avoid using a global variable like that in an application. Instead, I'd make use of HTML5 data- attributes and store useful bits of data the frontend needs in them.
You can do something like this:
<body data-my-thing='{"foo": "bar", "baz": true}'>
The above example uses JSON, what I'd normally do is use json_encode in a controller or view composer and just echo out the string like so (since we're using Balde here, the JSON is automatically escaped):
<body data-my-thing='{{ $myJson }}'>
If you were just using plain PHP then you should escape the JSON like this:
<body data-my-thing='<?=htmlspecialchars($myJson) ?>'>
Of course, you don't need to JSON, if it's more appropriate you can just store a plain string or number in there. It depends on the needs of your application.
To grab the value from your data attribute you'd just use the following JavaScript:
document.body.getAttribute('data-my-thing');
And if you've made use of JSON, don't forget to decode it!
JSON.parse(document.body.getAttribute('data-my-thing'));
I used to use data- attributes to bootstrap data, but I kept running into issues involving quotes.
Say that this:
<body data-my-thing='{{ $myJson }}'>
Evaluates to this:
<body data-my-thing='{"foo": "bar", "baz": true}'>
No big deal. What if your data looks like this?
<body data-my-thing='{"foo": "bar's", "baz": true}'>
Suddenly you have an issue. That's why I've used the script solution that the original poster mentioned above.
2 Comments
ceejayoz
htmlspecialchars() is made for solving that.
Zach Briggs
Would you mind posting a solution that used that? I'm not from the PHP world so my experience is more general. (Though the issue I mentioned above did bite me in production.)