javascript - VueJS 通过节点插件返回循环数据值

Question

您好，我正在尝试创建一个 Vue 应用程序，它采用一种主色并从该主色创建一个调色板。 2 种颜色较浅，2 种颜色较深。我有一个输入字段，您可以在其中输入一个十六进制代码，然后它将生成其他 4 种颜色。我正在使用图书馆 chroma.js生成更暗/更亮的颜色，语法如下所示:

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

这是输入框

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

这是我的for循环

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

还有我在 Vue 实例中的数据。

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

所有这些都会产生类似的东西

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

这很酷，但理想情况下我会使用数据值来提供 Chroma.js 语法，例如

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

但显然那是行不通的。实现这一目标的最佳方法是什么？

我知道这是一个开放式问题。但是我在弄清楚我应该使用过滤器还是组件还是计算函数时遇到了麻烦。我尝试了大多数事情，但没有一个会奏效。我来自 jQuery 背景，所以事实证明这种以数据为中心的新方法很难让我全神贯注。感谢您的指点!

使用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}
      });
    }
  }

Answer 1

使用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}
      });
    }
  }