I have been looking for ways to use variables within the style tag of a Vue file and have come across this solution. I have attempted to use it as can be seen in the code sample below
...
</template>
<script>
export default {
data() {
return {
url: "test",
};
},
};
</script>
<style>
.backIm:before {
...
background: v-bind(url);
...
}
</style>
However, despite seeming set up the exact same way as was done in the documentation, the v-bind(url)
isn't interpreted when testing, as can be seen within the developer tools
I've searched but not found anyone with this exact issue. If anyone could explain why this is incorrect, and provide a solution, I'd be grateful.