VueJS return loop data values through a node plugin

Viewed 161

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 chroma.js to generate darker/brighter colors and the syntax looks like this:

chroma('red').darken(.4)

And this is the input field

<input class="w-100 pv3 pl4 input-reset ba b--black-20" @keyup="getColor(colorValue)" v-model="colorValue" placeholder="0AD674" >

This is my for loop

<li v-for="item in items">
  {{ item.colorProperty }}
  {{ item.intensity }}
  {{ colorValue }}
</li>

And my data inside the Vue instance.

data () {
    return {
      colorValue: '4e35e1',
      items: [
            {
              intensity: 3,
              colorProperty: 'darken'
            },
            {
              intensity: 1,
              colorProperty: 'darken'
            },
            {
              intensity: 0,
              colorProperty: ''
            },
            {
              intensity: 1,
              colorProperty: 'brighten'
            },
            {
              intensity: 3,
              colorProperty: 'brighten'
            }
          ],
    }
}

All of this generates something like

3 darken 4e35e1
1 darken 4e35e1
0 4e35e1
1 brighten 4e35e1
3 brighten 4e35e1

Which is cool but ideally I would use the data values to feed the Chroma.js syntax like

transformColor: function(value, property, intensity) {
   return chroma(value).property(intensity)
}

But obviously that doesn't work. What's the best way to achieve this?

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!

Solved by using map()

 computed: {
    colors() {
      return this.items.map((item) => {
        var colorHex = chroma(this.colorValue)[item.colorProperty](item.intensity).toString();
        var colorName = _.kebabCase(namer(colorHex).ntc[0].name);
        return {colorHex, colorName}
      });
    }
  }
1 Answers

Solved by using map()

computed: {
    colors() {
      return this.items.map((item) => {
        var colorHex = chroma(this.colorValue)[item.colorProperty](item.intensity).toString();
        var colorName = _.kebabCase(namer(colorHex).ntc[0].name);
        return {colorHex, colorName}
      });
    }
  }
Related