title: How to set a gradient color for the "border" when its at 100% by Vue - Custom css package
body: <p>I am using this package <a href="https://www.npmjs.com/package/vue-css-donut-chart#usage-with-all-the-available-props" rel="nofollow noreferrer">https://www.npmjs.com/package/vue-css-donut-chart#usage-with-all-the-available-props</a> to set the &quot;border&quot; around images based on progress.
  The problem is that I need to set a gradient color for the &quot;border&quot; when it is at 100%, and the props don't allow me to do that. So what I tried instead to achieve this is the following:</p>
  <pre><code>if(this.sections[0].value = 50) {
      this.sections[0].color = &quot;transparent&quot;
      this.sections[1].color = &quot;transparent&quot;
      let grad = document.querySelector(&quot;.cdc&quot;)
      grad.classList.add(&quot;border-gradient&quot;)
      console.log(grad)
  }
  </code></pre>
  <p>I am using this component at multiple places throughout the app, and the gradient color is only applied at one place:</p>
  <pre><code>&lt;Home&gt;
  &lt;sidebar/&gt; &lt;-----
  
  &lt;router-view /&gt;
  &lt;/Home&gt;
  </code></pre>
  <h2>Main.js</h2>
  <pre><code>import Donut from &quot;vue-css-donut-chart&quot;;
  import &quot;vue-css-donut-chart/dist/vcdonut.css&quot;;
  Vue.use(Donut);
  </code></pre>
  <h2>Donut component</h2>
  <pre><code>&lt;template&gt;
  &lt;div&gt;
       &lt;vc-donut
            :sections=&quot;sections&quot;
            :size=&quot;size&quot;
            :start-angle=&quot;angle&quot;
            :thickness=&quot;thickness&quot;
            :foreground=&quot;'#D4DDFC85'&quot;
          &gt;
          &lt;b-img v-if=&quot;profilePic&quot; class=&quot;object-fit-contain rounded-circle p-1 m-0&quot; :width=&quot;width&quot; :src=&quot;profilePic&quot;/&gt;
          &lt;/vc-donut&gt;
          &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import backend from &quot;@/services/backend.js&quot;
  
  export default {
      props: [&quot;profilePic&quot;, &quot;size&quot;, &quot;width&quot;, &quot;thickness&quot;],
   data: () =&gt; {
      return {
          me: null,
          angle: null,
        sections: [
          { value: 0, color: &quot;#4ECB62&quot; },
          { value: 0, color: &quot;#223C9B&quot; },
        ],
      };
    },
    mounted() {
        this.fetch_me()
    },
  
  
  
    methods: {
        async fetch_me() {
            this.me = (await backend.me()).data
           
            
         
           if(this.me.roles.indexOf('investor') != -1 &amp;&amp; this.me.roles.indexOf('homeowner') != -1) {
              // Set values for homeowner depending on amount of listed properties
             /*  if(this.me.homes.length == 100) {
                   this.sections[1].value = 50
               } else if (this.me.homes.length &gt;= 25) {
                   this.sections[1].value = 40
               } else if (this.me.homes.length &gt;= 5) {
                   this.sections[1].value = 35
               } else {
                   this.sections[1].value = 25
               }*/
  
               this.sections[1].value = 50 
                 this.sections[0].value = 50
                 if(this.sections[0].value = 50) {
                     this.sections[0].color = &quot;transparent&quot;
                     this.sections[1].color = &quot;transparent&quot;
                     let grad = document.querySelector(&quot;.cdc&quot;)
                     grad.classList.add(&quot;border-gradient&quot;)
                     console.log(grad)
                 }
              // Set the correct angle depending on the value (Investor &amp; Homeowner)
                   if(this.sections[0].value == 40 || this.sections[1].value == 40) {
                      return this.angle = 35
                   } else if (this.sections[0].value == 50 || this.sections[1].value == 50) {
                      return this.angle = 0
                   } else if (this.sections[0].value == 35 || this.sections[1].value == 35) {
                      return this.angle = 90
                   }  else if (this.sections[0].value == 25 || this.sections[1].value == 25) {
                      return this.angle = 25
                   }
              
            } else if(this.me.roles.indexOf('homeowner') != -1) {
              if(this.me.homes.length == 100) {
                   this.sections[1].value = 100
               } else if (this.me.homes.length &gt;= 25) {
                   this.sections[1].value = 85
               } else if (this.me.homes.length &gt;= 5) {
                   this.sections[1].value = 65
               } else {
                   this.sections[1].value = 50
               }
          
      
              // Set the correct angle depending on the value (Homeowner)
                  if(this.sections[1].value == 50) {
                      return this.angle = 90
                  } else if(this.sections[1].value == 65) {
                      return this.angle = 62
                  } else if(this.sections[1].value == 85) {
                      return this.angle = 27
                  } else {
                      return 0
                  }
            } else if(this.me.roles.indexOf('investor') != -1) {
                this.sections[0].value = 50
                if(this.sections[0].value == 50) {
                  this.sections[0].value = 50;
                }
                // Set the correct angle depending on the value (Investor)
                if(this.sections[0].value == 50) {
                      return this.angle = 90
                  } 
            }
        },
  
    }
  }
  &lt;/script&gt;
  
  The console.log(grad) shows that the class is added to the element, but the CSS isn't applied.
  
  </code></pre>
  <p>Example of use of the donut(ProfileImageRings) component</p>
  <pre><code>&lt;profile-image-rings v-if=&quot;user.picture&quot; :width=&quot;160&quot; :size=&quot;170&quot; :thickness=&quot;7&quot; :profilePic=&quot;user.picture&quot;/&gt;
  </code></pre>
  <h2>custom.scss</h2>
  <pre><code>.border-gradient {
      background: linear-gradient(90deg, #223C9B 0%, #4ECB62 100%) !important;
  }
  </code></pre>