title: How can I bind a linear-gradient background property made up of dynamic variables constituting the color names, angles, etc?
body: <p>I keep running into this problem. I need to be able to set the background of various elements in my component as dynamic linear gradients. (The context is creating a grid background that scales and adjusts depending on various inputs).</p>
  
  <p>I want to be able to build up my <code>linear-gradient</code> CSS background property dynamically in a function, e.g. here's a simplified version of what I am trying to achieve:</p>
  
  <pre><code>createBackgroundString(){
      return 'linear-gradient(' + this.angle + 'deg, ' + this.color1 + ', ' + this.color2 + ')';
  }
  </code></pre>
  
  <p>...and then stick that into my <code>:style</code> attribute to have Vue apply it dynamically:</p>
  
  <pre><code>v-bind:style="{ background: createBackgroundString() }"
  </code></pre>
  
  <p>Vue rejects (ignores) this outright, presumably because the resultant string is too complex to fit the property template which expects a simple string like 'red' or '#FF000' etc.</p>
  
  <p>Is there any way/hack/workaround to achieve this in Vue? At the moment I'm having to resort to jQuery for this which is far from ideal.</p>