title: generating manual linear gradient in vue with the color ,percentage and degree input
body: <p>I am trying to create a manual linear gradient from color,degree and percentage input.User can add as much color as they want. What i want to do is user will pick the degree.Then user will select a color and percentage.When the user click addButton it will be concatinated with string and this way user will concatinate the color and percentage as much as they want  and the final value will be something like this:</p>
  <pre><code>linear-gradient(0deg, #0359b5ff 0%, #f6ce01ff 50%, #f6ce01ff 100%)  
  </code></pre>
  <p>Here is my template where there is a color picker,percentage and degree input.onclick the add button it will generate  value in the <strong>final Gradient</strong> input box</p>
  <pre><code>&lt;template&gt;
        &lt;VContainer class=&quot;mx-5 fluid align-self-start&quot;&gt;
            &lt;div class=&quot;d-flex&quot;&gt;
              &lt;label&gt;
                Final gradient
              &lt;/label&gt;
              &lt;VTextField
                v-model=&quot;gradient&quot;
                filled
                flat
                autofocus
                @blur=&quot;$v.gradient.$touch()&quot;
              &gt;
              &lt;/VTextField&gt;
            &lt;/div&gt;
            &lt;div class=&quot;d-flex&quot;&gt;
              &lt;label&gt;
                Percentage
              &lt;/label&gt;
              &lt;input
                style=&quot;border:1px solid black&quot;
                v-model=&quot;percentage&quot;
                type=&quot;number&quot;
                @change=&quot;onPercentage()&quot;
              &gt;
            &lt;/div&gt;
            &lt;div class=&quot;d-flex&quot;&gt;
              &lt;label&gt;
                Degree
              &lt;/label&gt;
              &lt;input
                style=&quot;border:1px solid black&quot;
                v-model=&quot;degree&quot;
                type=&quot;number&quot;
              &gt;
            &lt;/div&gt;
    
            &lt;input
              v-model=&quot;gradientColor&quot;
              type=&quot;color&quot;
              @change=&quot;onChange()&quot;
            &gt;
            &lt;div class=&quot;container&quot;&gt;
              &lt;div class=&quot;button-group&quot;&gt;
                &lt;div&gt;
                  &lt;VBtn
                    @click=&quot;addColor&quot;
                    class=&quot;d-flex mx-auto mt-6&quot;
                    width=&quot;137px&quot;
                    height=&quot;40px&quot;
                    color=&quot;primary&quot;
                  &gt;
                    addColor
                  &lt;/VBtn&gt;
                  &lt;button
                    @click=&quot;addColor&quot;
                  /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
       &lt;/VContainer&gt;
      
      &lt;/template&gt;
  </code></pre>
  <p>this is my data value:</p>
  <pre><code>data() {
      return {
        degree: 0,
        coloring: ' ',
        gradientColor: ' ',
        primaryColor: ' ',
        percentage: 0,
    
      };
    },
  </code></pre>
  <p>In the computed gradient final output is generated</p>
  <pre><code>computed: {
      gradient() {
        let colors = 'linear-gradient(';
        colors += `${(this.degree)}deg`;
        colors += this.gradientColor + this.percentage;
        colors += ')';
        return colors;
      },
      primary() {
        let colors = ' ';
        colors += this.primaryColor;
        return colors;
      },
  }
  </code></pre>
  <p>and here is all the method.onClick the addColor percentage and color value will be concatinated</p>
  <pre><code>methods: {
   onChange(val:string) {
        this.primaryColor = `${(val)}`;
      },
      onPercentage(val:string) {
        this.primaryColor = `${(val)}`;
      },
      addColor() {
        this.gradientColor.concat(this.primaryColor);
        this.primaryColor = '';
      },
  }
  </code></pre>
  <p>I dont want use an array for this.I want the value would be added in a single variable string.But somehow  i am not being able to do it.How can i do it to work?</p>