1

An example of what I'm trying to do 

  <template>
      <div>
        <p>I pee red!</p>
      </div>
    </template>
    <script>

    export default {
      data: () => ({
        aModelWithStyle: {name: "Hansel", css:".p{color:red}"}
      })  
    }
    </script>

    <style scoped lang="scss">
      {{aModelWithStyle.css}}
    </style>

Obviously {{aModelWithStyle.css}} within the style tag does not work. How would I accomplish this using Vue?

Sam Luther
  • 1,170
  • 3
  • 18
  • 38
  • Usually its done vice versa. You define css in style section and reference it in your component. What the use case for the css from component into style? – Aldarund Jul 17 '18 at 22:09
  • yes, I understand how it's usually done. The use case is an model object that contains it own style information. So, if i load a model of runway models each runway model that is displayed will load it's own css. – Sam Luther Jul 17 '18 at 22:14
  • afaik its not possible. Check this https://github.com/vuejs/vue/issues/4879 There some hacks like described in that ticket e.g. something like https://stackoverflow.com/questions/47322875/vue-js-dynamic-style-with-variables But thats it – Aldarund Jul 17 '18 at 22:30
  • thanks for those links! oh well, went hardcore and injected the style into the dom – Sam Luther Jul 18 '18 at 02:34

2 Answers2

0

"You cannot change the styles dynamically at runtime from your component’s JavaScript - no."

https://forum.vuejs.org/t/is-it-possible-to-inject-css-into-vue-component-style-section/38813/3?u=three60

Sam Luther
  • 1,170
  • 3
  • 18
  • 38
-2

The vue documentation says that you can use

<style src="./my-component.css"></style>

I'm not sure if that's exactly what you're looking for, but that's my best guess.

Pang
  • 9,564
  • 146
  • 81
  • 122
penelope
  • 1
  • 2