0

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

v-bind not being parsed in 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.

Alex Druzenko
  • 67
  • 1
  • 9
  • 3
    The documentation you are looking into is of Vue3. Vue2 does not support v-bind in CSS. However you can do this using var in Vue2. Have a look at this question- https://stackoverflow.com/questions/50625973/vue-js-v-bindstyle-pseudo-element-after-content-icon – Neha Soni Jan 13 '23 at 04:32
  • Just make your style scoped and it'll work – Abbas Shaikh Jan 13 '23 at 06:10
  • @NehaSoni I can't believe I didn't notice it's Vue3 exclusive. Thank you so much, the project is small enough where I believe my best option is migrating to Vue3, but I appreciate you providing an alternative solution. – Alex Druzenko Jan 13 '23 at 14:22

0 Answers0