title: VueJS return loop data values through a node plugin
body: <p>Hi I'm trying to create an Vue app which takes one key color and creates a color palette from the key color. 2 colors lighter and 2 colors darker. I have an input field where you enter a hex code and it will then generate the other 4 colours. I'm using the library <a href="https://github.com/gka/chroma.js/" rel="nofollow noreferrer">chroma.js</a> to generate darker/brighter colors and the syntax looks like this:</p>
  
  <p><code>chroma('red').darken(.4)</code></p>
  
  <p>And this is the input field</p>
  
  <pre><code>&lt;input class="w-100 pv3 pl4 input-reset ba b--black-20" @keyup="getColor(colorValue)" v-model="colorValue" placeholder="0AD674" &gt;
  </code></pre>
  
  <p>This is my for loop</p>
  
  <pre><code>&lt;li v-for="item in items"&gt;
    {{ item.colorProperty }}
    {{ item.intensity }}
    {{ colorValue }}
  &lt;/li&gt;
  </code></pre>
  
  <p>And my data inside the Vue instance.</p>
  
  <pre><code>data () {
      return {
        colorValue: '4e35e1',
        items: [
              {
                intensity: 3,
                colorProperty: 'darken'
              },
              {
                intensity: 1,
                colorProperty: 'darken'
              },
              {
                intensity: 0,
                colorProperty: ''
              },
              {
                intensity: 1,
                colorProperty: 'brighten'
              },
              {
                intensity: 3,
                colorProperty: 'brighten'
              }
            ],
      }
  }
  </code></pre>
  
  <p>All of this generates something like </p>
  
  <pre><code>3 darken 4e35e1
  1 darken 4e35e1
  0 4e35e1
  1 brighten 4e35e1
  3 brighten 4e35e1
  </code></pre>
  
  <p>Which is cool but ideally <strong>I would use the data values to feed the Chroma.js syntax like</strong></p>
  
  <pre><code>transformColor: function(value, property, intensity) {
     return chroma(value).property(intensity)
  }
  </code></pre>
  
  <p>But obviously that doesn't work. What's the best way to achieve this?</p>
  
  <p>I realise this is a open ended question. But I have had troubles figuring out whether I should use a filter or a component or a computed function. I tried most things but none of them would work. I come from a jQuery background so this new data-centric approach is proving to be difficult to wrap my head around. I'm grateful for any pointers!</p>
  
  <p>Solved by using <code>map()</code></p>
  
  <pre><code> computed: {
      colors() {
        return this.items.map((item) =&gt; {
          var colorHex = chroma(this.colorValue)[item.colorProperty](item.intensity).toString();
          var colorName = _.kebabCase(namer(colorHex).ntc[0].name);
          return {colorHex, colorName}
        });
      }
    }
  </code></pre>