Is there a way to utilize the data() values within the <style>..</style> section? I have experimented with different combinations (using/omitting this, with/without {{brackets}}, etc.) but haven't been successful. Interestingly, when I manually input a value like '#f00', it works perfectly fine.
My template structure looks like this:
<template>
<ul class="striped">
<li>foo</li>
<li>bar</li>
<li>foobar</li>
</ul>
</template>
<style>
ul.striped> li:nth-of-type(odd) {
background-color: this.colors[0].backgroundcolor; //dynamic value fetched from data()
}
</style>
<script>
data() {
return {
colors: [{'backgroundcolor':'#def'}], //simplified version for clarity
[..]
</script>