I'm currently exploring the world of Vue JS and I thought it would be interesting to experiment with something new. Sometimes looking at the code first makes understanding it much easier than a lengthy explanation.
Check out this code snippet on jsFiddle!
In the code, you will notice two placeholders ([% message %]). My goal is to display a random color for each of these placeholders from a predefined list. Do you think this is achievable?
Here's the HTML structure:
<div id="app-5">
<div class="color">
<span class="colorHandler">
<p>[% message %]</p>
</span>
</div>
<div class="color">
<span class="colorHandler">
<p>[% message %]</p>
</span>
</div>
... # the quantity of these specific '[% message %]' tags may vary.
</div>
This is the JavaScript (VueJs) part :
var colors = "['#e6f0ff', '#000a1a' ,'#ffe680', '#ffcc00', '#ffd9b3']";
var parsed_colors = colors.match(/#[a-f0-9]{6}/g);
var randomIndex = Math.floor(Math.random() * parsed_colors.length);
var randomElement = parsed_colors[randomIndex];
var app5 = new Vue({
el: '#app-5',
data: {
message: randomElement
},
delimiters: ["[%","%]"]
})
Any thoughts on how I can make this work? Your guidance would be greatly appreciated!