vue.js - VueJS方法中的有条件颜色材质图标？

Question

我正在使用 Quasar v0.15.9、Vue v2.5.0 和材料图标构建一个应用程序。我在类星体列表中有一个类星体可折叠

<q-list class="q-ma-none q-pa-none" v-for="(fiberPhase, index) in salesRepPhases" :key="index">
    <q-collapsible 
      :label="'Phase ' + fiberPhase.fiber_phase + ' ' + '(' + fiberPhase.fiber_status + ')'" 
      :icon="fiberIcon(fiberPhase.fiber_status)">
      <PhaseToBlocks :fiberPhase="fiberPhase.fiber_phase" />
    </q-collapsible>
  </q-list>

我将fiber_status每个列表项传递给设置图标的 VueJS 方法：

methods: {
  fiberIcon: function (status) {
    if (status === 'Live') {
      return 'fiber_manual_record'

    if (status === 'Pending') {
      return 'fiber_manual_record'
    }
    return 'fiber_manual_record'
  }
}

我可以设置为三个不同的图标，但我更喜欢设置相同的图标并根据三种状态设置图标颜色。有人看到可行的方法吗？样式是设置组件级别的，我也是stylusQuasar 的一部分。我要设置的颜色是手写笔变量，可以按照通常的 VueJS 标准内联或在样式标签中设置：

<style lang="stylus" scoped>
@import '~variables'

.q-item:focus
  background $secondary

.q-list-header 
  text-align center
  background $tertiary
  color white

</style>

以下是带有非彩色图标的列表示例：

Answer 1

这不是一个常见的问题，但我用<q-icon />, 而不是 bound:icon属性解决了这个问题：

<q-icon class="q-pa-sm" name="fiber_manual_record" :class="fiberIcon(fiberPhase.fiber_status)"/>

然后我能够返回类并设置为手写笔变量：

.live
  color $positive
.pending
  color $negative
.provisioning
  color $warning

对于这个的最终结果：